使文本在重叠div上方可见[复制]

Question

这个问题在这里已有答案：

• Html/Css Triangle with pseudo elements 1回答
• Speech bubble with arrow 3回答

我有一个设计要求，其中div必须与另一个div重叠，但内部div中的文本需要是可见的。

<div class='box1'>
  <div class='sendAbove'>
    This is a message I want to be visible in this div
  </div>
</div>

<div class='box2'>

</div>

CSS

.box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}

https://jsfiddle.net/sriv87/Lcoxrgpw/9/

编辑：更新小提琴https://jsfiddle.net/sriv87/c8eh5fcs/

Answer 1

好的，根据您的更新要求编辑。检查一下。

.callout {
  position: relative;
  background: #ffffff;
  border: 1px solid #f00;
  width: 200px;
}

.callout:after,
.callout:before {
  position: absolute;
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
}

.callout:after {
  border-color: rgba(255, 255, 255, 0);
  border-left-color: white;
  border-width: 10px;
  margin-top: -10px;
}

.callout:before {
  border-color: rgba(255, 0, 0, 0);
  border-left-color: #f00;
  border-width: 11px;
  margin-top: -11px;
}

<div class="callout">
  <p>Message here</p>
</div>

Answer 2

使用您当前的布局，它不会工作。因为qazxsw poi的父母是绝对定位的，所以它的qazxsw poi将永远是其父母的一部分。无论你做它.sendAbove或html。

所以为了使这个可行，你应该把absolute放在relative之外。给他们两个相同的位置，高度和宽度。

.sendAbove

.box1

Answer 3

只需更改.box2中的背景颜色设置，即可使下方的文字可见。 rgba中的'a'将决定可见性，并且从0到1运行，即0.1非常透明，0.9几乎没有透明度。

.wrapper {
  position: relative;  
}

.box1, .sendAbove {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
}

.box1 {
  background: white;
  border: solid red 1px;
  z-index: 3;
}

.box2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  background: white;
  border: solid blue 1px;
  z-index: 4;
}

.sendAbove {
  z-index: 5;
}

}