关于z-index层级问题
我们想通过使用z-index改变父子层级,使父亲的层级高于孩子,从而覆盖儿子,然而结果却不是我们想要的,无论我们怎么调高父亲层级,降低儿子层级都没有用
首先使用z-index需要先加上position:absolute/relative定位
然后你要知道z-index 是要考虑父级的,如果子级z-index为0,那么父级就是200000也不会覆盖住子级。原因如下:
在标准浏览器中,对父级的要求不是特别高,同级的对应上z-index可以了。但要注意的是父级里放一个子级那么父级是无法放在子级之上的,需要放在同一级别中才可以(经过测试的)
如果想要父级覆盖子级,那么父级不需要设置z-index,只要孩子设置就z-index就可以了。
把子元素的z-index设置成负值,这样就可以实现父元素的盖在子元素之上
这样引发的问题是在下方的元素会覆盖掉子元素,为了让下方的元素不至于覆盖掉子元素只能给下方的元素一个个加负层级了。
z-index的属性设置是同级判断,同级覆盖,父子之间只有子元素的层级为负值时才会覆盖,且父级没有设置z-index属性