如何使子元素显示在其父元素后面(Z索引更低)? [英] How to 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.

我需要:

<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.

为了执行我想要的功能，我做了一个条件语句，其中重叠的子元素将在阻止其父视图的情况下变得透明.这不是完美的，但它是某种东西.

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.

推荐答案

如果元素构成一个层次结构，则不能那样做，因为每个定位的元素都会创建新的

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.

这篇关于如何使子元素显示在其父元素后面(Z索引更低)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！