在重叠div上方显示文本

Question

我有一个设计要求，其中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

使用您当前的布局，它无法正常工作。由于.sendAbove的父级是绝对定位的，因此其html将始终是其父级的一部分。无论你是absolute还是relative。

为了使其可行，您应该将.sendAbove放在.box1之外。给它们相同的位置，高度和宽度。

＆＃13;

＆＃13;

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

＆＃13;

<div class="wrapper">
<div class='box1'>
</div>

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

<div class='box2'>

</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

java-10

}