如何将一个div放在另一个[重复]答案

【问题标题】：How to place a div over another [duplicate]如何将一个div放在另一个[重复]
【发布时间】：2015-12-05 18:18:24
【问题描述】：

我正在尝试将一个 div 放在另一个之上。

要查看我想要实现的目标，请查看此图片：https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg

我希望我的灰色左侧 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

【问题讨论】：

z-index: 2 on #left 不这样做？
查看z-index 和绝对定位。 css-tricks.com/almanac/properties/z/z-index
不是已经在上面了吗？它们一开始没有重叠，所以当你在 #left 上使用 position: relative; top:-10px 时，你会看到它确实与粉红色重叠。
有什么理由不能在<html> 或<body> 上使用背景图片作为粉红色？那么你的 DIV 会默认覆盖它吗？您是否正在尝试为网络复制简历？你真的应该澄清你想要达到的目标，因为它根本不清楚。
有什么理由你不能做某事like this？没有绝对定位或 z 索引。有点像你所追求的。

标签： html css

【解决方案1】：

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

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

看到这个JSfiddle demo

【讨论】：

【解决方案2】：

感谢所有，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;
}

这非常适合我想要的。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我没有完全得到您的预期结果，但这里有一个 POC

#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;
}

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

【讨论】：

【解决方案5】：

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

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

编辑：查看this JSFiddle。 #left div 在#right 的上方。从左侧 div 的 CSS 样式中移除 z-index 属性，您将看到它不会再高于另一个 div。

【讨论】：