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

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

CSS: Overlaping two images and proper flow

html

css

overlap

overlapping