z-index设置无效的试验

最新推荐文章于 2024-03-16 15:35:46 发布

VoiceU

最新推荐文章于 2024-03-16 15:35:46 发布

阅读量1.7k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Voiceu/article/details/110452199

版权

在练习的时候出现问题，想利用上部的div（企业采购）取消下border，加padding-bottom，用背景色盖住下部div的border-top，但我无论怎么设置两者的z-index都无法使其盖住，如图
在这里插入图片描述

可见，一定是哪里出了问题，当时的代码如下

				.li5{
                    // position: absolute;
                    .li5-list{
                        position: absolute;
                        display: none;
                        border: 1px solid rgb(204,204,204);
                        border: 1px solid rgb(117, 19, 19);
                        width: 155px;
                        top: 29px;
                        left: -1px;
                        top: 30px;
                        left: 286px;
                        padding: 10px 0 5px 15px;
                        li{
                            width: 56px;
                            height: 24px;
                            display: inline-block;
                            overflow: visible;
                            a{
                                // padding-left: 15px;
                                line-height: 24px;
                                // width: 70px;
                                vertical-align: text-bottom;
                                // 不换行用 nowrap
                                white-space: nowrap;
                            }
                        }
                    }
                    &:hover .li5-list{
                        display: flex;
                        z-index: 998;
                    }
                    &:hover{
                        background-color: #fff;
                        border: 1px solid rgb(204,204,204);
                        border: 1px solid rgb(89, 43, 197);
                        padding-bottom: 2px;
                        border-bottom: 1px solid white;
                        border-bottom: none;
                        z-index: 999;
                    }
                  }

本人当时将上部的块当做一个独立的div，其实这种说法也没错，但是这个div是下部li5-list的父元素，

用z-index进行设置的时候，生效的是针对兄弟元素，或者其他不相关的元素，唯独不能对父元素生效，意思就是，不管将父元素的z-index设置多大，而将子元素设置为小于父元素的z，比如父：999，子：2，子元素依旧会在父元素的上面，

对于父元素的兄弟元素，会首先比较父元素与兄弟元素的z-index，当兄弟元素小于父元素时，不会影响子元素的布置，但若是同等级或是更高，则要考虑，如果同等级下，兄弟元素还开启了浮动，比如position-absolute，那么，子元素无论怎么设置都会被覆盖，等级高不过父元素的兄弟元素

知道了过后其实很好理解，相对于每个元素都是一个独立的空间，当这个元素有兄弟元素的时候，他俩同台竞争，台指的是当时的父元素，如果兄弟元素index大，那么自身空间里的所有元素都高不过兄弟那边的元素，不在一个维度，但是自身里面的子元素如何设置index也不会改变自身的维度，他们只能相互比较，而对于之前说的，或者比较其他不相关的元素这种说法，其实也是因为一般都没设置元素的z-index，所以其他元素的z-index基本上都是基于body这个“父元素”来说的。

以下是试验的例子

	<style>
        .no1 {
            width: 70px;
            height: 300px;
            background-color: rgb(131, 47, 47);
            display: flex;
            z-index: 45;
            /* position: relative; */
        }

        .no2 {
            width: 100px;
            height: 200px;
            background-color: rgb(202, 110, 110);
            position: absolute;
            z-index: 2;
        }

        .no3 {
            width: 100px;
            height: 200px;
            background-color: rgb(57, 159, 190);
            position: absolute;
            left: 50px;
            z-index: 10;
        }
        .no5{
            display: flex;
        }
        .no4{
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: rgb(114, 42, 81);
            z-index: 44;
        }
    </style>
</head>
<body>
    <div class="no5">
        <div class="no1">
            <div class="no2">
            </div>
            <div class="no3">
            </div>
        </div>
        <div class="no4">
        </div>
    </div>
</body>

在这里插入图片描述

当父元素兄弟元素的z-index设置为父元素一级时，兄弟元素会float，所以会盖住所有的

.no4{
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: rgb(114, 42, 81);
            z-index: 45;
        }

在这里插入图片描述
回到遇到的难题，我实在是没办法了，就用了伪类，然后设置了绝对位置，z-index=999,来设置一个白块，hover的时候就挡在border上，如下

				.qiye{
                        :first-child::before{
                            content: '';
                            display: none;
                            // display: block;
                            position: absolute;
                            width: 75px;
                            height: 4px;
                            background-color: #fff;
                            top: 29px;
                            right: 0;
                            z-index: 999;
                        
                    }
                }
                &:hover .qiye :first-child::before{
                    display: block;
                }