Question

我已经和这个问题打了两天了。我想将div与图像放在绝对位置，在其他div下面放置图像。不知何故，div正在忽略图像并叠加在一起。

因此它应该在第一行显示一个图像，在第二行显示两个图像。我一定错过了一些明显的东西。

以下是来自JSFiddle的代码：

#banner-left {
    position:absolute;
    width:100px;
    height:100px;
}

#header{
    position:relative;
    background: #ffa;
}

#footer {
            position:relative;
            margin-top:0px;
            width: 100%;
            background: #6cf;
}
<div id="header">
        Header
        <div id="banner-left">
            <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
        </div>   
</div>

<div id="footer">
    FOOTER
    <div id="banner-left">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>
    <div id="banner-left" style="top:0px;left:100px;">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>

- edit-- 我忘了提到图像必须处于绝对位置。这就是问题所在。

Answer 1

在此布局设计中可能不需要使用绝对定位。

以下是我实施此方法的方法。

注意： id在网页上应该是唯一的，因此我将您的#banner-left更改为班级.banner-left。

＆＃13;

.banner-left {
    float: left;
    margin-right: 20px; /* if needed */
}
.banner-left img {
    display: block;
}
#header {
    overflow: auto;
    background: #ffa;
}
#footer {
    overflow: auto;
    background: #6cf;
}

＆＃13;

<div id="header">
    <h1>Header</h1>
    <div class="banner-left">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>
</div>
<div id="footer">
    <h2>Footer</h2>
    <div class="banner-left">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>
    <div class="banner-left">
        <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
    </div>

＆＃13;

Answer 2

在横幅广告ID中，添加

  display: inline-block;

Answer 3

我忘了提到图像必须处于绝对位置。这就是问题所在。

Marc，您的示例效果很好，但我有很多具有绝对位置的图像，我想根据网站大小移动一个简单的容器div。

如何将div放在另一个div下面的图像？

3 个答案: