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

检查小提琴。

像这样的东西应该工作。

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>

Answer 2

使用 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%;" />

Answer 3

根据 Savas 的回答，当我<img>没有给出绝对定位时，我遇到了一些渲染问题......

以下是如何<hr>使用图形装饰创建一个。根据<div>所使用的图形调整大小，并且将所有内容视为页面上的单个空间定义单元：

#example {
    display: block;
    position: relative;
    width: 100%;
    height: 92px;
}

#example hr {
    position: absolute;
    z-index: 0;
    top: 46px;
    bottom: 46px;
    margin: 0px;
    width: 100%;
    border: 5px solid #8fcbf1;
}

#example img {
    position: absolute;
    width: 272px;
    height: 92px;
    z-index: 5;
    left: calc(50% - 136px);
}

<div id="example">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
  <hr />
</div>

这是小提琴： https ://jsfiddle.net/z517fkjx/

此外，这calc()用于居中，仅适用于 CSS3。