如何将一个元素叠加在另一个元素上方

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;" />

- Joe Engle

---

这是代码片段。它没有离开页面。 - Joe Engle

在 JFiddle 上运行您的代码片段看起来很好。您能提供一个能够重现错误的示例吗？http://jsfiddle.net/p5PBn/ - MaX

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>

- Savas Vedova

Answer 2

使用 Z-index。在 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%;" />

- Jonny Sooter

---

那会是什么样子？ - Joe Engle

让我和我的合作伙伴确认一下。稍等片刻。 - Joe Engle

你的建议似乎不起作用：http://jsfiddle.net/TSCeS/ 如果你添加 position:relative;，这是 z-index 起作用所必需的。不过我不确定为什么... - Pevara

Answer 3

建立在Savas的回答之上，当没有给予绝对定位时，我遇到了一些渲染问题...

以下是如何创建带有图形装饰的

---

。

的尺寸与使用的图形大小相同，并且所有内容都像页面上的单个空间定义单位一样处理：

#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>

这里是 Fiddle: https://jsfiddle.net/z517fkjx/

此外，这个使用了 calc() 居中，这是仅限于 CSS3 的。

- Chad Philip Johnson