Html 在内部定位较高的图像或；“在上面”；一个较小的div

我想这样做：

                                             ----------------   
                                             |              |
----------------------------------------------              ----------------
white background div                         | image on top |
----------------------------------------------              ----------------
                                             |              |
                                             ----------------

#content-header {
    height: 4em;
    width: 100%;
    background: #000;
    color: #fff;
    position: absolute;
}

我希望图像位于前景，以便它在顶端和底端与div重叠

我已经尝试过的是通过百分比值对

top

和

right

进行绝对定位-但是，正如您所知，当您调整浏览器窗口的大小时，所有工作都是徒劳的

有人能帮忙吗

---

如果这是你想要的，给你

HTML

---

这里是一个供您参考的示例

此示例不需要任何固定的条形图或图像的高度或宽度像素值

HTML

<div class="bar">
    <img src="http://lorempixel.com/output/food-q-c-200-200-5.jpg" alt=""/>
</div>

很容易做到

只需添加位置：绝对；到您的#内容标题

因此，您的css如下所示：

                                             ----------------   
                                             |              |
----------------------------------------------              ----------------
white background div                         | image on top |
----------------------------------------------              ----------------
                                             |              |
                                             ----------------

#content-header {
    height: 4em;
    width: 100%;
    background: #000;
    color: #fff;
    position: absolute;
}

然后更改#bubble的边距顶部

因此，而不是顶部：15%；排名靠前-75%

这是-75%，因为-50%会将img的中间部分带到收割台的底部。 所以你还是要把它放在上面一点。这是你已经做的长度的一半，这就是为什么它是75%

对于#bubble，您的css将如下所示：

---

查看我制作的代码。

请将您的代码张贴在此处。我没有注意到这一点真是太遗憾了。在缩小浏览器窗口时，它仍会移动一点，但正如我所说的，只移动了一点。我计划删除移动版本的图像。非常感谢，我可以尝试修复它，但如果不是真的需要，我会让它保持这样。当然，如果你更改div或图像的高度，它会断开。@StenPelzer在我的情况下，它不是必需的，因为我将在较小的屏幕上隐藏该图像。但如果你能解决这个问题，为什么不呢。非常感谢

#content-header {
    height: 4em;
    width: 100%;
    background: #000;
    color: #fff;
    position: absolute;
}

#bubble {
    height: 161px;
    position: absolute;
    right: 32%;
    top: -75%;
    width: 165px;
}