z-index不起作用的大坑

最新推荐文章于 2024-05-31 19:50:46 发布

转载最新推荐文章于 2024-05-31 19:50:46 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/hcrw01/article/details/85986115

文章标签：

#html #javascript #js

本文深入探讨了CSS中z-index属性的使用原则及其常见问题，解析了z-index在不同情况下的表现，如父标签的position属性设置、问题标签的position属性缺失或存在浮动属性时的z-index失效现象，并提供了相应的解决方案。

转载：https://blog.youkuaiyun.com/hcrw01/article/details/85986115

一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让subtop在insert上面，subbottom在insert下面，

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .insert{
            position: relative;
            z-index:100;
            background: green;
            width:300px;
            height:300px;
            top:100px;
        }
        .parent{
            /*position:relative;
            z-index: 1000;*/
            width:200px;
            height:200px;
            /*left:0;
            top:-50px;*/
            border:1px solid #eee;
        }
        .subbottom{
            position:relative;
            z-index: 50;
            width:200px;
            height:200px;
            background: red;
            top:-100px;
            left:0;
 
        }
        .subtop{
            position: relative;
            z-index:1100;
            width:100px;
            height:100px;
            left:0;
            top:0;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="insert"></div>
    <div class="parent">
        <div class="subtop"></div>
        <div class="subbottom"></div>
    </div>
</body>
</html>

在这里插入图片描述