Question

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

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

所有元素都设置为display:block，h1被拖动到图像内部，并带有负边距。我还给标题添加了一些填充和background:white。

现在出现问题：标题文字显示在图片的顶部，但背景颜色在它后面！您可以在此处查看示例：https://jsfiddle.net/cv12evLn/

我的猜测是，浏览器会渲染层中的所有兄弟块，从所有背景和边框开始，然后渲染图像（img-tags），最后在其他所有内容上进行文本处理。

是吗？为什么实际......我的意思是，这对我来说似乎很意外。

要解决此问题，我已将标题放在包装中并将其设置为position:absolute。请参阅此处以获取实时示例：https://jsfiddle.net/f5sd1u6o/

Answer 1

使用position:relative而不是负边距。然后z-index自动运行。

＆＃13;

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

＆＃13;

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

＆＃13;

要使Z-index工作，您需要应用position:relative，但如果这是设计要求，您仍然可以使用负边距。

JSfiddle demo（带有负边距）

基本上，背景首先呈现在其他任何东西之前（据我所知），因此它们总是位于堆叠顺序的底部。您只需要创建一个新的堆叠上下文并更改position属性即可。

正如所发生的那样，更改元素的opacity以便快速解决设置opacity:.9999;

JSfiddle Demo（不透明＆＃39;黑客＆＃39;）

当重叠img-tag时，它会在img

1 个答案: