css堆栈顺序，z-index

我不能为我的生活弄清楚如何在不改变html结构的情况下在顶部获取红色。css堆栈顺序，z-index

我怎么顶得上冲？我有红色的z-index值和位置的每个组合等

的HTML：

<div id="red"> 
    <div id="green"></div> 
</div>

的CSS：

div { 
    width: 300px; 
    height: 300px 
} 
#red { 
    background: red; 
    z-index: 10; 
    position: relative; 
} 
#green { 
    background: green; 
    width: 290px; 
    z-index: -10 
}

来源

2013-05-31 Nick Lang

我认为你必须更改HTML结构......你能做到这一点的JavaScript，如果改变原有的HTML是困难的。 –

在z-index上推荐这些文章：http：//philipwalton.com/articles/what-no-one-told-you-about-z-index/和http://coding.smashingmagazine.com/2009/09/ 15/the-z-index-css-property-a-comprehensive-look/ –

取下育儿元件的Z-Index并给两个元件相同position:规则。

概念证明：http://jsfiddle.net/GSBtG/2/#update

来源

2013-05-31 02:22:58

为什么-25？ -1不起作用？ – PSL

它会工作。你可以忽略25.我只是做更大的步骤，以防我需要在两个元素之间放置东西。 –

Upvoted这个答案，因为它的工作原理。但我想指出的是，发生的事情是绿色的是在红色的后面，而不是绿色的前面的红色，这是不可能实现的。 – pzin

设置对孩子产生负面z-index并删除父母上的z-index。

#parent { 
    position: relative; 
} 
#child { 
    position: relative; 
    z-index: -10; 
}

jsFiddle

Source

来源

2013-05-31 02:22:05 Zhihao

css堆栈顺序，z-index

回答

相关问题