代码之家 › 专栏 › 技术社区 › Apple Orange

如何解决弹出覆盖问题

css3 css

Apple Orange · 技术社区 · 6 年前

我有两个div my html page header div和popup overlay div。当我打开popup overlay时,我面临的是z-index问题,不仅仅是header div。我想应用除了popup以外的overlay。如何解决这个问题?

弹出覆盖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;
}

2 回复 | 直到 6 年前

Selahaddin Ünügür 6 年前

你可以试试这个兄弟。

弹出覆盖CSS:

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

标题CSS:

.header {
  overflow:hidden;
}

Jon Wyatt 6 年前

标题和覆盖都具有相同的Z索引值。如果希望覆盖显示在标题上,请增加覆盖的Z索引值。

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

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

或者你可以降低 z-index 价值 .header 相反。它对你的整体造型规则最有意义。

编辑:更新了我的答案,还包括对覆盖层位置的更改(基于您在其他注释中链接的小提琴)。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前