如何在具有更高z-index的另一个元素的子元素前面获得具有较低z-index的元素的子元素？

Question

我有以下设置:

<div style="z-index: 10">
      <div>Whatever</div>
</div>

<div style="z-index: 9">
      <div><div>Haaaleluia</div></div>
</div>

当然......我过分简化了设置,但这是主要的想法."无论"div与"Haaaaleluia"div重叠.当然因为第一个父母有更大的z-index"无论什么"是可见的而"haaaleluia"不是.

如果不改变设置(并且要明确包括保留父母的z索引),我怎样才能让"Haaaaleluia"成为最佳人选？

对于那些要求打印的人来说,这也是...也谢谢你的帮助:

大坏图是第二个div.

该教程是第一个div.

带订单的面板是地图的子项.我需要它在顶部.如果我将整个地图设置在顶部,则该教程不再可见.如果我将地图保留在订单面板后面,则不再可见.

Answer 1

简而言之:你做不到.不可能让父元素的子元素z-index低于兄弟元素,并且给该子元素一个比父母兄弟更高的z-index值,因为继承的z-index是相对于父元素的(对于某人来说,请参阅此问题)遇到同样的事情).

但是,根据您的设置,您可以完全删除z-indices,并让浏览器将您的顶部div置于下方.然后你可以玩给孩子一个z-index价值.