如何在另一个上放置div [英] How to place a div over another
问题描述
我正在尝试将div放在另一个之上。
I am trying to put a div on top of another.
要查看我要实现的目标，请查看以下图片： https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg
To see what I want to achieve, check this image: https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg
我希望将我的灰色左div放在粉红色标题的顶部。
I want my grey left div on top of the pink header.
这是我到目前为止的HTML：
Here is my HTML so far:
<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
This is putting my pink header on top of the grey left one, and I want it to be other way around, just like in the photo I showed you: https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg
推荐答案
您需要使用 z-index 和 position：absolute CSS属性。另外，您还需要通过将一些值赋予 top 来定位第二个 DIV （位于另一个顶部）和 left CSS属性。下面是一个示例：
You need to use z-index and position:absolute CSS properties. Additionally you need to also position your second DIV (which is on top of the other) by giving some values to top and left CSS attributes. Following is an example:
#first{
position: absolute;
z-index:1;
}
#second{
position: absolute;
z-index:2;
top: 50px;
left: 50px;
}
请参阅此 JSfiddle演示
See this JSfiddle demo
这篇关于如何在另一个上放置div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg](\"https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg\"){kind=link}