元素z-index css属性

我有3个元素，两个在同一级别，和一个孩子，都有固定的位置。我需要设置z-index属性以将父级放置在底部，将元素放在中间的同一级别上，并将子级放在顶部。元素z-index css属性

我试过为孩子设置一个更高的z-index，但它不工作。

<div class="red"> 
    <div class="blue"></div> 
</div> 
<div class="green"></div>

这里的情况http://jsfiddle.net/udENm/21/（我需要在中间red底部，和blue上面，在同级别仍保持red和）。

我的CSS是这样

.red { 
    position: fixed; 
    z-index: 2; 
} 

.green { 
    position: fixed; 
    z-index: 2; 
} 

.blue { 
    position: fixed; 
    z-index: 5; 
}

来源

2012-10-22 Gabriel Diaconescu

当你说你需要红色和绿色在同一水平上，你的意思是必要的，他们都有相同的z-index，还是只需要它们在视觉上出现在相同的级别上？ –

@SimonCarlson不，它们不需要具有相同的z-index，但需要具有z-index，因为它们可能包含在另一个元素中，并且可能具有z-index属性集。 –

这里的问题是虽然子元素具有另一个z索引集，但子元素将会继承其父级的z索引。子元素z-index只与同一父元素中的其他子元素相关，而相同的z-index不会影响父元素之外的元素。请参阅下面的答案，它解决了您当前的问题。 –

绿色块z-index需要低于红色块。我用这个CSS，而不是你贴一个：

.foo { 
    background: red; 
    position: fixed; 
    left: 50px; 
    top: 50px; 
    z-index: 2; 
    width: 100px; 
    height: 100px; 
} 

.bar { 
    background: green; 
    position: fixed; 
    left: 100px; 
    top: 100px; 
    z-index: 1; 
    width: 100px; 
    height: 100px; 
} 

.child { 
    background: blue; 
    position: absolute; 
    top:50%; 
    left:50%; 
    z-index: 5; 
    width: 50px; 
    height: 50px; 
}

工作正常，你可以看到绿色的是现在的z-index 1，红色的z-index 2和蓝色块具有绝对定位。

来源

2012-10-22 15:11:46

的z-index属性只具有含硫元素的stacking context内生效。换句话说，如果在同一个父元素中有一堆块元素，可以很容易地控制它们的前后顺序。但是，z-index只能控制此父元素中的前后排序，而不能在全局上下文中进行排序。

所以，你可以在.red之内往回移动.blue。您也可以在z平面周围切换.red和.green。但是，您不能在.red和.blue之间放置.green，因为它们处于不同的堆叠环境中。

编辑堆栈上下文仅适用于流中的元素。如果你使用position:absolute，那么你可以做到这一点。请参阅Rick Calder的回答

来源

2012-10-22 15:09:51 Dancrumb

将您的位置设置为绝对值，并完全从父div（红色）移除z-index。 http://jsfiddle.net/calder12/udENm/32/

.foo { 
background: red; 
position: absolute; 
left: 50px; 
top: 50px; 
width: 100px; 
height: 100px; 
} 

.bar { 
background: green; 
position: absolute; 
left: 100px; 
top: 100px; 
z-index: 2; 
width: 100px; 
height: 100px; 
} 

.child { 
background: blue; 
position: absolute; 
left: 40px; 
top: 40px; 
z-index: 5; 
width: 50px; 
height: 50px; 
}

来源

2012-10-22 15:10:04

Z-index is relative in a way to the parent。红色已经在2，而蓝色只有z-index 5与其兄弟姐妹相比，但不是像Green那样的外部元素。

每个堆叠上下文都是独立的：在堆叠元素的内容之后，整个元素被视为父堆栈上下文的堆叠顺序。

来源

2012-10-22 15:10:38 Brian

有点这样吗？

http://jsfiddle.net/kBv7R/

HTML

<div class="foo"> 
     <div class="child"></div> 
     <div class="bar"></div> 
    </div>

CSS

.foo { 
    background: red; 
    position: fixed; 
    left: 50px; 
    top: 50px; 
    z-index: 2; 
    width: 100px; 
    height: 100px; 
} 

.bar { 
    background: green; 
    position: fixed; 
    left: 100px; 
    top: 100px; 
    z-index: 5; 
    width: 100px; 
    height: 100px; 
} 

.child { 
    background: blue; 
    position: fixed; 
    left: 90px; 
    top: 90px; 
    z-index: 6; 
    width: 50px; 
    height: 50px; 
}

来源

2012-10-22 15:14:53 SomeShinyObject

元素z-index css属性

回答

相关问题