我有一个关于两个对象的定位的问题:图像和 div。 我希望 bg2.png 图像保留在 div 下方。 我一直遇到图像将 div 向下推 img 高度的问题。我该如何避免这种情况？
我尝试用“top:”值下推图像，但当然它在 div 上方留下了空白区域。我还尝试向“maincontent”div 添加负“top:”值和相对位置，但它再次给我留下了空白区域，唯一的区别是这次它位于 div 下方。
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
提前致谢。
编辑 - 我想要实现的目标: Click me!
最佳答案
2个解决方案:
更改 HTML 结构:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
或将其设为背景图像:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
关于css - 在CSS中将图像定位在div下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11932100/