元素z-index继承问题

最新推荐文章于 2024-05-09 17:24:34 发布

倪舒扬

最新推荐文章于 2024-05-09 17:24:34 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010403387/article/details/46632147

本文探讨了HTML中元素层级与z-index属性之间的关系，解释了当同层元素存在子元素重叠时，如何通过调整z-index实现元素的正确显示顺序。通过实例演示了如何设置z-index值来解决元素被覆盖的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两同层元素，其中一个的子元素定位与另一个重叠时，该子元素被覆盖（此时子元素的z-index继承的是其父元素的z-index，无论其z-index多少均被覆盖）

<html>
<head>
<style>
#blue{
background:blue;
z-index:1;
}
#w1{
background:red;
position:relative;
z-index:21;
}
#w2{
background:pink;
position:relative;
z-index:21;
}
#w3{
background:grey;
position:relative;
top:11px;
z-index:22;
}
</style>
</head>

<body>
<div id="blue">
 <div id="w1">
  <div id="w3">3</div>
 </div>
 <div id="w2">2</div>
</div>

</body>

</html>