我如何才能使底部堆叠上下文中的元素保持在另一个较高堆叠上下文的前面? [英] How can i make an element from a bottom stacking context stays in front of another higher stacking context?

问题描述

我如何才能使包含在堆叠顺序底部的堆叠上下文中的元素出现在另一个堆叠上下文中的另一个元素的前面，而另一个堆叠上下文中堆叠元素的顺序更高?

例如:

HTML:

 < div class ="Parent-1"></div>< div class ="Parent-2">< div class ="pepe"></div>< div class ="pepin"></div></div> 

CSS:

  .Parent-1 {位置:绝对；z索引:10；背景颜色:绿色；}.Parent-2 {位置:绝对；z索引:5；背景颜色:红色；}.pepe，.pepin {背景颜色:蓝色；}.pepin {位置:固定；z索引:100；} 

这就是我所拥有的(这是应该发生的):

这就是我想要的:

请记住，我无法更改HTML中的元素顺序，也不能删除Parents元素中的z-index

解决方案

简短的答案是你做不到.这张图片来自和

CSS:

.Parent-1{
    position: absolute;
    z-index: 10;
    background-color: green;
}

.Parent-2 {
    position: absolute;
    z-index: 5;
    background-color: red;
}

.pepe, .pepin{        
    background-color: blue;
}

.pepin{
    position: fixed;
    z-index: 100;
}

this is what i have (this is what it's suppose to happen):

this is what i want:

Bare in mind that i can't change the elemnts order in HTML neither remove the z-index in Parents element

解决方案

The short answer is that you can't. This image from MDN's explanation about stacking context explains it well:

There has been talk about escaping stacking context using position: fixed but it seems this is not happening just yet (see this fiddle and the question that generated it).

Alternate Solution:

For you, a possible alternative solution would be to nest Parent-1 inside Parent-2 and then use position: absolute to put Parent-1 wherever you want it.

这篇关于我如何才能使底部堆叠上下文中的元素保持在另一个较高堆叠上下文的前面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！