如何让子元素显示在比其父元素后面(较低的 z-index)? [英] How to get a child element to show behind (lower z-index) than its parent?

问题描述

我需要某个动态元素始终出现在另一个元素之上，无论它们在 DOM 树中的顺序如何.这可能吗?我试过 z-index(带有 position:relative)，但它似乎不起作用.

我需要:

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

渲染时显示完全相同.出于灵活性的目的(我计划发布一个需要此功能的插件)，我真的不想求助于绝对或固定定位.

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

解决方案

如果元素构成层次结构，则不能这样做，因为每个定位的元素都会创建新的 堆叠上下文，z-index 是相对于相同堆叠上下文的元素.

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

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-index)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！