Question

我试图把div放在另一个上面。

要查看我想要达到的效果，请查看此图片：discusses here

我希望我的灰色左侧div位于粉红色标题之上。

到目前为止，这是我的HTML：

<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>

我的CSS：

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
}

这是将我的粉红色标题放在左边的灰色标题上，我希望它可以反过来，就像我给你看的照片一样：https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg

Answer 1

您需要使用z-index和position:absolute CSS属性。此外，您还需要为DIV和top CSS属性提供一些值，从而定位您的第二个left（在另一个之上）。以下是一个例子：

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

请参阅 JSfiddle demo

Answer 2

Z-index在第三个轴上进行更改。具有较大z-index编号的元素将覆盖具有较小z-index编号的元素。

为了琐事，任何元素的默认z-index都是auto，这意味着它从 parent 元素继承了一个值。 html元素的z索引为0。

修改：查看this JSFiddle。 #left div位于#right之上。从左侧div的CSS样式中删除z-index属性，您将看到它不会再高于另一个div。

Answer 3

我不能很好地得到你期望的结果，但这是一个POC

＆＃13;

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    z-index: 1;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
    position: absolute;
    z-index: 2;
}

＆＃13;

<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>

＆＃13;

Answer 4

try this example here, it was working fine you expected http://jsfiddle.net/maheswaran/fcw043zL/

Answer 5

感谢所有人，在 leo.fcx 和 Mirza 的解释之间（“Z-index在第三轴上进行更改。较大的z-index数字将覆盖一个较小的元素“）我做了

我不知道z-index是什么。

最后我有：

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
    margin-top: -8px;
    position: relative;
    z-index: 2;
}

这对我想要的完美无缺。

如何将div放在另一个上面

5 个答案: