当重叠一个img标记时，它会在img后面呈现背景/边框，并在img前面呈现文本。

Question

对于一个简单的登陆页面，我想让一些文本框重叠一个标题图像。为了简单起见，我只是有一个结构：

<header>
  <img src="path/to/img.png" />
  <h1>Awesome headline</h1>
</header>

所有元素都被设置为display:block，并且h1被拖到图像中，具有负的边距。我也给了标题一些填充和background:white。

现在的问题是:标题文本显示在图片的顶部，但背景颜色在后面！您可以在这里看到一个例子：https://jsfiddle.net/cv12evLn/

我的猜测是，浏览器以层的形式呈现所有兄弟块，从所有的背景和边框开始，然后呈现图像(img-标记)，最后在所有其他内容之上显示文本。

，对吗？以及为什么实际的…我的意思是，这对我来说是不可思议的意外。

为了解决这个问题，我将标题放在一个包装器中，并将其设置为position:absolute。下面是一个活生生的例子：https://jsfiddle.net/f5sd1u6o/

Answer 1

使用position:relative而不是负边距。然后z索引自动工作。

​

#container {
  width: 500px;
  height: 300px;
  margin: auto;
}
#container img {
  display: block;
  width: 100%;
}
#container h1 {
  display: block;
  width: 50%;
  height: 1em;
  margin: auto;
  padding: .5em 1em 1em;
  font-size: 3rem;
  background: yellow;
  text-align: center;
  border: 1px solid red;
  position: relative;
  top: -4.6rem;
}

<div id="container">
  <img src="//placekitten.com/500/300">
  <h1>
    headline
  </h1>
</div>

​

要使Z索引正常工作，无论如何您都需要应用position:relative，但如果这是设计要求，您仍然可以使用负裕度。

JSfiddle demo (有负值)

基本上，背景首先呈现在其他任何事物之前(据我理解)，因此它们总是在堆叠顺序的底部。您只需要创建一个新的堆叠上下文，更改位置属性就可以做到这一点。

正如所发生的那样，更改元素的opacity也是如此，所以快速修复就是设置opacity:.9999;

JSfiddle Demo (不透明'hack')