Question

我想要一个div去另一个div。在此示例中，我希望#under位于#box下。我用z-index玩了一下，但我无法让它工作，我想这与我的标记安排方式有关。

我的问题是 - 是否可以在不更改标记的情况下将#under置于#box下？

您可以在此处查看我的示例：http://jsfiddle.net/timkl/hrsHY/

这是我的HTML：

<div id="main-content">

    <div id="box">
        <h2>box</h2>
    </div><!-- /box -->

</div><!-- /main-content -->

<div id="under">
    <h2>under</h2>
</div><!-- /under-->

<div id="footer">
    <h2>footer</h2>  
</div><!-- /footer -->

这是我的CSS：

#container {
    font-family: Helvetica;
    color: #ccc;
    font-weight: bold; 
    }


#main-content, #box, #footer, #under {
    padding: 16px;
    }


#box {
    background: #F3F3F1;
    height: 200px;
}

#under {
    height: 40px;
    background: orange;
    margin-top: -100px;
    z-index: -10;
    opacity: .7;
    color: brown;
    }

#footer {
    background: #F3F3F1;    
}

Answer 1

您的z-index ed元素需要有z-index的位置才能应用。尝试使用position: relative为每个div添加z-index。

#under {
    height: 40px;
    background: orange;
    margin-top: -100px;
    z-index: -10;
    opacity: .7;
    color: brown;
    position: relative;
}

Answer 2

Z-index仅适用于绝对定位。

#container {
        font-family: Helvetica;
        color: #ccc;
        font-weight: bold; 
        position: absolute;
    }

    #under {
        height: 40px;
        background: orange;
        margin-top: -100px;
        z-index: -10;
        opacity: .7;
        color: brown;
        position: absolute;
        }

当你希望它们相对定位时（如 postion：relative; ）你可以将它们绝对定位在相对于获取两个div组合的相对位置的周围div中。< / p>

在z轴上排列div

2 个答案: