为什么相对定位消除不透明度？

Question

我做了一个简单的网站，其中有一个图像在背景中有0.3的不透明度，并有一个背景颜色。最重要的是一些文字。下面是HTML：

如果我使位置相对，文本不受图像的不透明度的影响。如果我让它不是相对的，它会受到不透明的影响。我只是想知道为什么相对定位会产生这样的效果。

​

.bg-1 {
  width: 100%;
  height: 80vh;
  background: url(img/keyboard.jpg) no-repeat center center;
  background-position: top;
  background-size: cover;
  opacity: .3;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#welcome {
  padding-top: 15px;
  color: #66FCF1;
  z-index: 1;
  position: relative;
  /*this is the point of concern*/
}

.first {
  width: 100%;
  height: 80vh;
  background-color: black;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid first text-center">
  <div id="welcome">
    <p class="welcomeSize">Welcome!</p>
  </div>
  <div class="bg-1">
    <!--the bg image with opacity-->
  </div>
</div>

​

Answer 1

你看到的是z-index。即使您已经有了一个z-index on #welcome，但z-index属性在向带有z-index的元素中添加非static position之前不会生效。因此，添加position: relative会激活#welcome上的z-index，将#welcome放在.bg-1之上而不是后面。

Answer 2

默认情况下，元素按html中指定的顺序加载。在本例中，您的.bg-1元素在#welcome元素之后加载(因此，也就是在此基础上)。

同样， is only applied to positioned elements (即。fixed、relative和absolute)。应用position:relative时，您将触发要应用的z-index，并“提升”背景图像上方的#welcome元素。