父子级间的z-index关系

 自己经常用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

猜你喜欢

转载自blog.csdn.net/jarniyy/article/details/80006096

相关文章