如何在另一个元素上重叠一个元素

您好我有一个<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

如何在另一个元素上重叠一个元素

回答

相关问题