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：重叠两个图像和正确的流程

1 个答案: