如何获得z-index较低的元素的子元素在z-index较高的另一个元素的子元素的前面? [英] How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

问题描述

我有以下设置:

<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"则不可见.

Of course... I oversimplified the setup but that's the main idea. The "whatever" div is overlapped by the "Haaaaleluia" div. Of course because the first parent has bigger z-index "whatever" is visible and "haaaleluia" is not.

在不更改设置的情况下(并且要明确地包括保持父母的z索引)，如何使"Haaaaleluia"排在最前面?

Without changing the setup (and to be clear that includes keeping the parents z-indexes), how can I make "Haaaaleluia" to be on top?

对于那些需要打印的人，它是...也感谢您的帮助:

For those asked for print here it is... also thank you for help:

糟糕的大图是第二格.

本教程是第一部分.

带有命令的面板是地图的子级.我需要它在最前面.如果将整个地图放在顶部，该教程将不再可见.如果我将地图保留在订单"面板后面，将不再可见.

The panel with orders is child of the map. I need it to be on top. If I set whole map on top, the tutorial is not visible any more. If I keep the map behind the orders panel is not visible any more.

推荐答案

总之:不能.不可能有一个父元素的子元素的z-index比同级元素小，并且给该子元素一个比父元素同级元素更高的z-index值，因为继承的z-index是相对于父元素的相对值(请参见此问题，适用于遇到同一件事的人) .

In short: you can't. It's not possible to have a child of a parent element with a z-index lower than a sibling, and give that child a higher z-index value than the parent's sibling, as the inherited z-index is relative to the parent (see this question for someone coming up against the same thing).

但是，根据您的设置，您可以完全删除z索引，然后让浏览器将顶部的div放在下面的z索引上方.然后，您可以尝试给孩子们一个z-index值.

However, depending on your setup, you can remove the z-indices completely, and let the browser place your top div above the one below. You could then play around with giving just the children a z-index value.

这篇关于如何获得z-index较低的元素的子元素在z-index较高的另一个元素的子元素的前面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！