Html 铬中不同母体元素的z指数

有两个容器。一个是固定的，覆盖100%的屏幕。第二个是相对的-包含可滚动的内容。问题是有四个元素彼此相对定位，如下所示：第一个在固定容器中，第二个在绝对位置，第三个固定位置，第四个在绝对位置

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

但是，其中一个父元素的z索引将始终小于另一个，这不允许对4个子元素进行排序

有小提琴 我要订单：黄色，绿色，白色，黑色从底部开始。但正如你所看到的——黄、白、绿、黑

我想要的结果：

但是元素应该在不同的容器中

提前谢谢

这对我有帮助：对于许多元素，只有html重建才有帮助。幸运的是，我不需要为固定元素使用固定容器，因为固定元素的位置和大小取决于窗口大小，即使我将它们放在相对容器中也是如此

这是我的HTML：

<div class="fixed">
    <div class="yellow">
        <div class="green">
            <div class="white">
                <div class="black"></div>
            </div>            
        </div>        
    </div>
</div>

最好的

---

Cynthia

经过进一步的调查，子元素不能/不应该能够否决父z索引，一些浏览器，例如Firefox，尽管出于某种原因忽略了父索引，并显示您希望显示的元素，但我尝试过的其他浏览器（Opera、Safari、Chrome）都没有，因此，如果不更改HTML的标记以实现跨浏览器兼容性，就不可能实现您想要的功能

编辑：

你甚至可以在这个主题中找到不少帖子

编辑-2:

根据您想要完成的任务，有许多其他方法可以获得假“zindex”行为，值得一看的是

指针事件：无加上透明背景，你永远不会知道它在另一个元素之上

如果是背景，你可以使用不同设置的方块阴影来伪装它

我想不出任何其他原因，但如果你告诉我，我也会给你一个解决方案

关于
它对我来说非常好，你使用的是什么浏览器？顺便说一句，我使用的是firefox。谢谢你告诉我真相。我没想到chrome（最新版本26.0.1410.64 m）会出现这种行为。有人知道如何在webkit中解决这个问题吗？元素应该在不同的容器中。因为有些是固定的，有些是可滚动的，因为它会有内容？哪些颜色需要可滚动？相对容器中的元素。每个颜色的元素（绿色、黄色等）是否需要可滚动？不，有些是固定的，有些是可滚动的。固定和可滚动的背景部分感谢解释。糟糕。我将以不同的方式寻找解决方案。@只有_dimon更新了答案，其中的解决方案可能是您想要实现的替代方案是的。它适用于两种类型的背景。固定块和相对块可以包含具有背景图像、图像（渐变、图案和主题图像）的div。相对包含站点内容的包装器，每次都应该放在上面。不幸的是，指针事件黑客无法帮助处理许多对象。我试图为我的客户找到可接受的html更改解决方案project@only_dimon很抱歉，他们都没有帮到你，也许作为最后的手段，你可以尝试掩蔽，但这将是大量的工作很少，我不推荐它。但无论如何，请将此问题标记为已回答，以便其他有类似问题的人可以在此处找到帮助=）
html, body { height:100% }

body { padding:0 ;
    margin:0 ;
}

.fixed { height:100% ;
    min-height:100% !important ;
    background:#666666 ;
    position:relative ;
    z-index:1 ;
}

.yellow, .green, .white, .black {
    display:block ;
    margin:auto !important ;
    position:absolute ;
    top:0 ;
    bottom: 0 ;
    right: 0 ;
    left: 0 ;
}

.yellow { width:220px ;
    height:220px ;
    background:yellow ;
    z-index:100 ;
}

.green { width:170px ;
    height:170px ;
    z-index:200 ;
    background:green ;
}

.white { width:100px ;
    height:100px ;
    z-index:200 ;
    background:white ;
}

.black { width:50px ;
    height:50px ;
    z-index:300 ;
    background:black ;
}