Как перекрывать один элемент над другим

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

Используйте Z-индекс. В css, если вы установите hr на более высокое значение z-index, он будет накладываться над изображением. Или, поскольку вы плаваете на изображении, плавайте hr тоже, а затем установите более высокий z-индекс на нем, чтобы он все еще перекрывал изображение.

Если вы плаваете <hr>, вам нужно будет установить ширину на родительский элемент.

Использование:

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

Если то не»разрешить его использовать вместо этого:

<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/> 
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" /> 

Answer 2

Использование 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>