如何将一个元素重叠到另一个元素上

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

检查小提琴。

像这样的东西应该有效。

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>