通过overlay div元素查看文本

Question

我有两个带有背景颜色设置的div元素，覆盖在另一个带有内容的div上。在第一种情况下，覆盖不是内容div的兄弟，因此它允许背景文本对用户可见。在第二种情况下，覆盖是内容div的同级，所以它不会向用户显示文本。

案例1

<div class="overlay"></div>
<div class="example-container">
  <div class="child1">
    Case 1 - Sample Text 1
  </div>
</div>

案例2

<div class="child1">
  Case 2 - Sample text 2
</div>
 <div class="overlay">
 </div>

Sample JSfiddle to simulate 2 scenarios.

你知道为什么在html中会有这样的行为吗？我们如何才能使带有背景颜色(case-2)的覆盖div始终允许文本透明。

Answer 1

这里的问题是div是在文本上呈现的。这可以通过为overlay提供-1的z-index属性来轻松解决。这使div呈现在文本下，允许您查看它。

覆盖css示例

.overlay {
    position: absolute; 
    background-color: gray;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    z-index: -1;
  }

或者，因为你想要它覆盖(如果你实际上不这样做，这是一个非常误导的名称)，只需设置较低的不透明度

.overlay {
    position: absolute; 
    background-color: gray;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    opacity: 0.5;
  }