首页 > 建站教程 > 前端框架 >  父元素设置了z-index,导致position:fixed的子元素z-index失效正文

父元素设置了z-index,导致position:fixed的子元素z-index失效

父元素设置了z-index,导致position:fixed的子元素z-index失效,注意,这里是父元素设置了z-index,不是说父元素定位,定位是没关系的。z-index有问题。我爱模板网在做elementUI的dialog弹窗时,发现弹窗变成了下面模样:



弹窗被自己的半透明黑色这招遮挡了,使用过elementUI的都知道,这个黑色遮罩是独立的存在与body根元素的,而dialog是存在于触发此弹窗的元素的同级的,一般elementUI会自动给dialog定位为fixed,黑色遮罩也是fixed,然后自动设置dialog的z-index比遮罩高一点,如下:



从上图可以看出,的确如此。但是为什么命名dialog的z-index比遮罩高,还是被遮罩遮挡。fixed按理说和absolute不一样,是不用看父级是否定位的。但事实是打脸的,包含dialog的父级定位了,影响了dialog的z-index,提高点就能显示出dialog了:



但是这样,dialog的父级header也会超出遮罩,这并不是我想要的。后来经过测试,将header的z-index去除了,就可以了。真的好奇葩的问题:



有知道的,可以在下方留言,告知我这是为什么?!

2020-10-25补充:element ui已经考虑过这种情况,只要在引用组件时,加入“:modal-append-to-body='false'”就能解决上面的问题,原理也很简单,加上这个属性,在生成dialog时,dialog的所有内容,都会放到body根节点,这样,就不会产生上面的干扰,dialog主体也肯定会盖住遮罩的。