HTML：获取一个子元素显示在后面（较低的z-index）比它的父？ [英] HTML: Get a child element to show behind (lower z-index) than its parent?

问题描述

我需要一个动态元素来始终显示在另一个元素的顶部，无论DOM树中的顺序如何。这可能吗？我尝试过 z-index （带有 position：relative ），似乎不起作用。我讨厌是模糊的，但这是最简单的方式，我可以想到这个问题，而不会解释其目的，恶心。

I need a certain dynamic element to always appear on top of another element, no matter what order in the DOM tree they are. Is this possible? I've tried z-index (with position: relative), and it doesn't seem to work. I hate to be vague, but this is the simplest way I can think of asking this question without explaining its purpose, ad nauseum.

所以，要回顾一下，我需要：

So, to recap, I need:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

呈现时显示完全一样。为了灵活性（我正在计划分发一个需要这个功能的插件），我真的不想诉诸绝对或固定的定位。

To display exactly the same when rendered. And for flexibility purposes (I'm planning on distributing a plugin that needs this functionality), I'd really like to not have to resort to absolute or fixed positioning.

补充：
为了执行我想要的功能，我做了一个条件语句，其中重叠的子元素将变得透明，以阻止其父级的视图。这不是完美的，但它是一些东西。

Addendum: For what it's worth, to perform the function I was wanting, I made a conditional statement where the overlapping child element would become transparent in the case it was blocking the view of its parent. It's not perfect, but it's something.

推荐答案

如果元素做一个层次结构，则不能这样做，因为每个位置元素创建新的堆叠上下文，并且z-index是相对于相同堆叠的元素上下文。

If the elements make a hierarchy, it cannot be done that way, because every positioned element creates new stacking context, and z-index is relative to the elements of the same stacking context.

这篇关于HTML：获取一个子元素显示在后面（较低的z-index）比它的父？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！