Question

我的html页面标题div和弹出窗口叠加层div有两个div。当我打开弹出叠加层不仅适用于标题div时，我面临着z-index问题。我想应用除我的弹出窗口之外的叠加层。解决这个问题？

弹出式叠加层CSS：

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0; 
z-index: 100; 
width:100%;
height:100%;
background:#fff;
opacity:.60;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);
}

标题CSS：

.header {
display: block;
top: 0px;
left: 0px;
width: 100%;
position: fixed;
z-index: 100;
margin: 0px;
padding: 0px;
background-color: #fff;
border-bottom: 1px solid #ebebeb;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 1

你可以试试这个兄弟。

弹出式叠加层CSS：

.overlay {
position:absolute;
z-index:105;
}

标题CSS：

.header {
  overflow:hidden;
}

Answer 2

您的标题和叠加层都具有相同的z-index值。如果您希望叠加层显示在标题上方，请增加叠加层的z-index值。

.overlay {
    z-index: 101;
    position: absolute;
    //other css
}

.header {
    z-index: 100;
    //other css
}

或者，您可以降低z-index的{{1}}值。对您的整体样式规则最有意义。

编辑：更新了我的答案，还包括更改覆盖图的位置（基于您在其他评论中链接的小提琴）。

如何解决弹出式叠加层问题

2 个答案: