Question

我有一个关于两个物体定位的问题：图像和div。 我希望bg2.png图像保持在div下。我一直遇到图像按img的高度推下div的问题。我该如何避免？

我尝试用“top：”值按下图像，但当然它让我在div上方留空区域。此外，我尝试将负“top：”值和相对位置添加到“maincontent”div但是再次给我留下了空白区域，唯一不同的是这次是在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!

Answer 1

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

Answer 2

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

</style>

<body>

 <div id="maincontent">
     <img src="./images/bg2.png" class="bgimg" alt="some info about image here">
 </div>
</body>

如果你想在div里面的那个图像使用这个代码。或者如果你想让那个div的图像背景使用css背景属性

在css下定位div下的图像

2 个答案: