文本未显示在背景上答案

【问题标题】：Text is not showing over background文本未显示在背景上
【发布时间】：2017-06-28 22:24:43
【问题描述】：

我的 h1 标题没有显示在我创建的背景上方我不知道它为什么会发生。 https://jsfiddle.net/b6gezctv/ 这是一个 jsfiddle，因此您将能够运行代码并查看它是否得到修复。

<!DOCTYPE html>
</html>
<head>
  <title>Coming Soon</title>
  <link rel="stylesheet" type="text/css" href="soon.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" 
  rel="stylesheet">
</head>
<body>

  <div class="heading">
    <h1>COMING SOON</h1>
      <hr>
  </div>

  <div class="start-1"></div>
  <div class="start-2"></div>
  <div class="start-3"></div>

</body>

h1 {
  text-align: center;
  color: white;
}

.start-1 {
  position: absolute;
  background-color: #202b36;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  min-width: 950px;
}

.start-2 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(https://server.pro/s/img/bg-pattern.png);
  background-color: transparent;
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  z-index: 1;
  min-width: 950px;
}

.start-3 {
  position: absolute;
  left: 0;
  top: 0;
  background-image: 
 url(https://farm3.staticflickr.com/2821/33503322524_4e67143f45_k.jpg);
  background-color: transparent;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.5;
  min-width: 950px;
}

【问题讨论】：

不是问题的原因，但您在开始标记之后还有一个结束 HTML 标记。

标签： css

【解决方案1】：

这是因为您的 start-1 start-2 start-3 元素是 position: absolute 并且它们覆盖了您的 h1。您需要将 position 和 z-index 添加到您的 h1 以便它可以看到：

position: relative;
z-index: 100;

或者，由于您的heading 类中有一个hr，我建议将position 和z-index 添加到整个类中，而不仅仅是h1 元素

.heading {
  position: relative;
  z-index: 100;
}

【讨论】：

而且，正如我在回答中所写，您仍然看不到 h1，因为它在白色背景上有白色文本颜色，因此请更改文本颜色或背景。
添加 position: relative 对我有用。谢谢。

【解决方案2】：

CSS 参数 h1 的字体颜色 (color) 为白色，并且由于您没有该 h1 的主体或任何父元素的背景，它显示为白底白字 =看不见。

所以要么改变背景，要么改变字体颜色。

此外，您的其他元素具有position: absolute 和位置left: 和top: 0，因此它们覆盖h1 更改这些位置值，或从其他元素中删除position: absolute。

【讨论】：

【解决方案3】：

显然 z-index 不适用于静态定位的元素，所以只需添加 position: relative to h1 样式就可以了，如下所示：

h1 {
  text-align: center;
  color: white;
  z-index: 3;
  position: relative;
}

【讨论】：