如何在另一個元素上重疊一個元素

您好我有一個<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;" />

來源

2013-05-28 Joe Engle

這是代碼的片段。它沒有關閉頁面。 –

在jfiddle中運行你的代碼片段看起來很好。你能提供一個重現錯誤的例子嗎？ http://jsfiddle.net/p5PBn/ – MaX

使用Z指數。在CSS中，如果將hr設置爲更高的z-index值，它將被分層放置在圖像上。或者，由於您正在浮動圖像，請將hr浮動，然後在其上設置更高的z-index ，以便它仍然會重疊圖像。

如果你漂浮<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%;" />

來源

2013-05-28 18:39:32

那會是什麼樣子？ –

我已經發布了一個例子。 –

讓我檢查一下我的伴侶。有一刻 –

使用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>

來源

2013-05-28 18:47:23

如何在另一個元素上重疊一個元素

回答

相關問題