z-index

做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。 简单演示 <div style="width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div> 两个DIV，第二个向上移动50px，正常情况应该是这样的 第二个div遮住了第一个div，对第二个添加z-index属性 <div style="width:200px;height:200px;background-color:#0e0;"></div> <div style="position:relative; top:-50px; width:100px

其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种： 1、父标签 position属性为relative； 2、问题标签无position属性（不包括static）； 3、问题标签含有浮动(float)属性。 这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个： 1、position:relative改为position:absolute； 2、浮动元素添加position属性（如relative，absolute等）； 3、去除浮动。 所以，去掉parent的position和z-index，达到了我想要的效果，如下图所示： ———————————————— 版权声明：本文为CSDN博主「瞬间空白sky」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/apple_01150525/article/details/76546367 来源： CSDN 作者： 飞翔的熊blabla 链接： https://blog.csdn.net/sd19871122/article