如何将div放在另一个div上
这个问题在这里已经有了答案：
您需要使用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演示
Z-索引在第三个轴上进行更改。 具有较大z-索引号的元素将覆盖具有较小值的元素。
为了琐事，任何元素的默认z-index都是auto ，这意味着它从它的父元素继承了一个值。 一个html元素的z-index为0 。
编辑：看看这个JSFiddle。 #left div在#right之上。 从左侧div的CSS样式中移除z-index属性，您将看到它不会再超过其他div。
我并不完全达到预期的结果，但这是一个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>