CSS：重叠两个图像和正确的流程

Question

正如您在http://jsfiddle.net/omarjuvera/v93us4n9/6/ 中看到的那样，该段落不在应有的位置，因为我重叠了两个图像。我该如何解决这个问题？

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>

CSS

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

Answer 1

这是因为 img 两个元素都被绝对定位并从流中移除。

因此，父元素div 自身折叠并具有0 的高度。除非父 div 元素有明确的尺寸，在这种情况下是高度，文本将重叠。

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

在您的情况下，由于 img 元素的大小相同，您可以通过仅绝对定位单个 img 元素来解决此问题。这样做时，父 div 元素的高度将根据非绝对定位的 img 元素的高度来定义。

Updated Example

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