css z-index 问题答案

【问题标题】：css z-index questioncss z-index 问题
【发布时间】：2011-02-17 11:08:01
【问题描述】：

z-index 的新手。我想把 backleftBox 和 backrightBox 放在 frontBox 后面，但我的代码似乎不起作用。

   <style type="text/css">
    #frontBox{ width: 400px; height: 500px; margin: 0 auto; background-color: #ccc; position: relative; z-index: 99;}
    #backleftBox{ width: 90px; height: 90px; background-color: green; position: absolute; left: -25px; z-index: 12;}
    #backrightBox { width: 90px; height: 90px; background-color: blue; position: absolute; left: -15px; z-index: 11;}
    </style>

<div id="frontBox">

    <div id="backleftBox"></div>
    <div id="backrightBox"></div>

</div>

【问题讨论】：

重复stackoverflow.com/questions/3376309/…

标签： css

【解决方案1】：

你在这里遇到的问题是“backleftBox”和“backrightBox”是“frontBox”的孩子。只需将它们移到“frontBox”之外，它们就应该在下面。

【讨论】：

【解决方案2】：

backrightBox 和 backleftBox 不能在 frontBox 的后面。不确定您希望它看起来如何，但它们不能像那样嵌套，然后您将不得不更改您的位置和边距属性以对齐它们。 z-index 可以按照您的方式使用。

【讨论】：