Html CSS：重叠两个图像和适当的流程

正如你在段落中看到的，这不是它应该在的地方，因为我重叠了两个图像。我怎样才能解决这个问题

HTML

<h1>Overlaping two images</h1>
<div>
    <img src="http://img.youtube.com/vi/brMyE7To7Sg/0.jpg" />
    <img src="http://oi57.tinypic.com/2u8kr2s.jpg" />
</div>
<br/>

<p>For some reason, this paragraph is not below DIV, but under/over</p>

---

这是因为两个

img

元素都被绝对定位并从流中移除

因此，父

div

元素会自动折叠，高度为

0

。除非父

div

元素具有明确的尺寸，否则在这种情况下，文本将重叠

在父元素上设置显式高度可以解决此问题，但这不是一个非常灵活的解决方案

在您的例子中，由于

img

元素的大小相同，您可以通过绝对定位单个

img

元素来解决此问题。这样做时，父

div

元素的高度将基于未绝对定位的

img

元素的高度来定义

---

聪明！我不想为合适的RWD添加“绝对”尺寸。谢谢

div {
    position: relative;
}
img {
    position: absolute;
    left: 0px;
    top: 0px;
}

<div>
    <img src="//placehold.it/480x360" />
    <img class="overlay" src="http://oi57.tinypic.com/2u8kr2s.jpg" />
</div>

div {
    position: relative;
}
img.overlay {
    position: absolute;
    left: 0px;
    top: 0px;
}