html - 如何将一个元素重叠在另一个元素上

Question

嗨，我有一个 <hr>线在页面上延伸，但我认为它一直被它上面的图像切断。有谁知道我怎样才能做到 <hr>线条与图像重叠？

<img src=".\pncwelcome.png" 
    style="float:right; clear:right; margin-top:-40px;" 
    alt="PNC Welcome Logo"/>
<hr color="black" 
    style="margin-top:30px;" />

Answer 1

使用position: absolute;。

Check the fiddle.

这样的事情应该可行。

CSS:

.parent {
    position: relative;
}

img {
    width: 200px;
}

hr {
    position: absolute;
    z-index: 50;
    top: 30px;
    right: 0;
    left: 0;
}

HTML:

<div class="parent">
    <hr>
    <img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>