z-index 父子层级关系

需求是通过 z-index 改变层级,使父元素高于子元素。

首先,z-index 作用于已经定位的元素(position 属性值是非 static 的元素)

其次,如果想要父级覆盖子级,那么父级不需要设置 z-index,子级设置 z-index 为负就可以了。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <div class="parent">parent
        <div class="child">child</div>
    </div>
</body>
<style type="text/css">
    .parent {
        background-color: yellow;
        position: relative;
    }
    .child {
        background-color: green;
        position: relative;
        z-index: -2;
    }
</style>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注