z-index设置无效的试验

在练习的时候出现问题，想利用上部的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;// 不换行用 nowrapwhite-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;}

效果达到了，但感觉方法很low，等以后看看有没有好办法

z-index设置无效的试验相关推荐

QStackedWidget设置无效问题
QStackedWidget设置无效问题在对QStackedWidget中的index窗体设置了样式,发现index为0的窗体样式无效,但是其它index都正常. 解决方法: 1. addwidge ...
关于Jupyter Notebook默认起始目录设置无效的解决方法
关于Jupyter Notebook默认起始目录设置无效的解决方法参考文章: (1)关于Jupyter Notebook默认起始目录设置无效的解决方法 (2)https://www.cnblogs. ...
div宽度设置无效问题解决
div宽度设置无效问题解决参考文章: (1)div宽度设置无效问题解决 (2)https://www.cnblogs.com/yulian/p/5132873.html 备忘一下.
表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法参考文章: (1)表格Table宽度设置无效的解决方法 (2)https://www.cnblogs.com/sherryweb/p/11659848.html ...
Keras TensorFlow 混编中 trainable=False设置无效
Keras TensorFlow 混编中 trainable=False设置无效这是最近碰到一个问题,先描述下问题: 首先我有一个训练好的模型(例如vgg16),我要对这个模型进行一些改变,例如添加 ...
内存设置无效: 内存预留 (sched.mem.min) 应该等于内存大小 (65536)
vCenter中的虚拟机在内存是32G的时候,一切都是正常的.当我将内存增加到64G后,在启动虚拟机时出现错误提示:内存设置无效: 内存预留 (sched.mem.min) 应该等于内存大小 (655 ...
UE4鼠标滚轮轴缩放事件设置无效
UE4鼠标滚轮轴缩放事件设置无效解决方案事件图表: 设置完后发现滚轮依然无法缩放界面,则设置: 将[进行碰撞测试]勾选取消,编译运行后,鼠标滚轮可以缩放.
arcgis数据的M/Z值设置问题
如何利用arcpy设置数据空间参考中的M/Z值信息空间参考和地理处理 1.M 分辨率(环境设置) 2.M 容差(环境设置) 3.输出包含 M 值(环境设置) 4.Z 分辨率(环境设置) 5.Z 容差 ...
关于css中line-height(行高)设置无效的问题
关于css中line-height(行高)设置无效的问题我们先写下这一串代码: <!DOCTYPE html> <html lang="en"> < ...

z-index设置无效的试验

z-index设置无效的试验相关推荐

最新文章

热门文章