1. 现象
下拉框设置了 z-index
为 1000
,却没有遮住底下 z-index
为 5
的内容。
1.1 最简示例
(1)HTML
<div class="fixed">
<div class="dropdown">
z-index: 1000;
</div>
</div>
<div class="error">
z-index: 5;
</div>
(2)CSS
body {
margin: 0;
}
.fixed {
position: fixed;
z-index: 3;
}
.dropdown {
position: absolute;
background: gray;
width: 300px;
height: 300px;
z-index: 1000;
}
.error {
position: absolute;
background: red;
width: 100px;
height: 100px;
left: 250px;
top: 250px;
z-index: 5;
}
1.2 效果
其中灰色部分表示下拉框,z-index
为1000
,
红色部分,z-index
为5
。
2. 原因
3. 修复方案
.fixed {
...
z-index: 6;
}