热门搜索 :
考研考公
您的当前位置:首页正文

[CSS] fixed 子元素的 z-index

来源:东饰资讯网

1. 现象

下拉框设置了 z-index1000,却没有遮住底下 z-index5 的内容。

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-index1000
红色部分,z-index5

2. 原因

3. 修复方案

.fixed {
    ...
    z-index: 6;
}

参考

Top