如何使子元素显示在其父元素后面(Z索引更低)?

本文介绍了如何使子元素显示在其父元素后面(Z索引更低)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我需要一个动态元素始终出现在另一个元素的顶部，无论它们在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.

推荐答案

如果元素构成一个层次结构，则不能那样做，因为每个定位的元素都会创建新的堆栈上下文，而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.