自己经常用z-index改变层级,但从来没有在父子元素上使用。今天一个小伙伴在制作二级菜单的时候就碰到了这个问题,引起了我深深的思考,天啦噜,我竟然不知道!废话少说,先看代码
我们想通过使用z-index改变父子层级,使父亲的层级高于孩子,从而覆盖儿子,然而结果却不是我们想要的,无论我们怎么调高父亲层级,降低儿子层级都没有用,弄到这里,你就说你有木有慌,有木有怀疑rensheng,你没有?天啦噜,我有啊!好了转入正题:
关于z-index层级问题
首先使用z-index需要先加上position:absolute/relative定位(这不废话啊!)。
然后你要知道z-index 是要考虑父级的,如果子级z-index为0,那么父级就是200000也不会覆盖住子级。原因如下:
在标准浏览器中,对父级的要求不是特别高,同级的对应上z-index可以了。但要注意的是父级里放一个子级那么父级是无法放在子级之上的,需要放在同一级别中才可以(经过测试的)
如果想要父级覆盖子级,那么父级不需要设置z-index,只要孩子设置就z-index就可以了。如下:
以上均是个人观点,如果有误,敬请指出,多多了解!以促进步!
原文链接:https://blog.csdn.net/web_yh/article/details/53327175