重叠的元素--z-index属性
首先声明：z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理是：**z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。**
** 下面我们通过几个例子继续来理解这个属性。**
例1：
image
即son1和son2是parent的两个子元素，效果图如下：
image
这是没有使用z-index，我们发现son2在son1之上，这是因为son2在html中排在了son1之后，所以后来者将前者覆盖，如果我们颠倒以下两者的顺序，就会发现蓝色(son1)在上了。
例2：
在son1中加入z-index：1；可以发现效果如下：
image
也就是说son2的index值是小于1的。
如果我们给son2也加上z-index:1;呢？结果得到黄色(son2)就在上面了。（因为一旦z-index值相等，情况就和都不设置index值一样了）
例3：
在son2中加入z-index:5;可以发现效果如下：
image
即黄色(son2)又在上面了，这个很简单，不作过多讨论。
例4：
在父元素添加z-index:10;
在son1和son2添加z-index:5; 这样理论上父元素就会在上面（黄色覆盖蓝色和黄色）；
结果如下：
image
结果没有变!!!!! 这就说明父元素和子元素不能做z-index的比较！！！但真的是这样吗？看下一个例子：
例5：
把两个子元素的z-index值同时设置为-5；父元素不设置z-index属性。结果如下：
image
成功！！说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。
例6：
我们在例5的基础上再给父元素添加一个z-index:10，讲道理~应该也可以得到和例5相同的结果吧！！
image
然而.... 看来我们不能设置父元素的z-index值，否则就不能出现我们想要的效果。下面再看一个有趣的例子!
例7：
我们根据例6的经验不设置父元素的值，现在设置son1(蓝色)的z-index为5，son2的z-index为-5，看下面的结果：
image
即son1在最上面，父元素在中间，son2在最下面。
对于z-index的探索就这样结束了吗？？当然没有，看下面几个更为有趣的例子吧。
例8：
代码如下：
image
效果如下：
image
虽然parent1和parent2分别是son1和son2的父元素，按照我们之前的理解，父元素是不可添加z-index值的，否则会导致错误。但是这里parent1和parent2相对于body又是子元素，他俩是同级的，所以就可以进行比较了。且此时parent1的子元素son1（蓝色）在上。
例9：
如果我们在例7的基础上，把parent2的z-index值设为20，就会发现如下效果：
image
即parent2在上的同时son2也会同时在上。这也就是所谓的“拼爹”了！！
例10.同样在例7的基础上，我们不设置parent1和parent2和son2的index值，而只设置son1的z-index值为10，效果如下:
image
即原本在下面的蓝色son1被提上来了，而没有把父元素（parent1）提上了，诶，不孝顺啊！！
例11.显然，在例10的基础上，如果我们把son2的index值设置的比son1的大，如20，那么son2就会覆盖son1了，并且都在两个父元素只上了！！
效果如下图：
image
例12.当然，如果我们把两个son的z-index都设置位负数如-5，那么两者就都会被父元素所覆盖：
image
转载自 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
网友评论