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

【问题标题】：Make text visible above overlapping div [duplicate]使文本在重叠 div 上方可见 [重复]
【发布时间】：2018-03-05 08:30:22
【问题描述】：

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

【问题讨论】：

使第二个框透明？ jsfiddle.net/2j60k9yu
@sol 不，这是设计要求。我需要重叠边框，而不是文本
你能提供一张想要的结果的图片吗？
你把它复杂化了......你把我们引向了别的东西，你需要从一开始就清楚你需要一个特定的形状而不是提供另一个问题
我知道，但下次最好直接了解您的需求 :) 所以您需要告诉我们您想要实现的目标，而不是向我们展示您想要强制实现目标的方法我们不知道的事情，因为我们可能会引导您找到更好的方法，而不是帮助修复复杂的方法

标签： html css

【解决方案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>

【讨论】：

我希望这就是您想要的。你的问题不是很清楚。
我已经更新了这个问题。我无法将消息与 box1 分开，因为我需要一个边框。文本可能是动态长度，我仍然需要一个边框。
试试这个，它会工作的。

【解决方案2】：

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

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

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

<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>

【讨论】：

消息是动态的。我设置边框的宽度和高度会有所不同。我已经更新了这个问题给你一个更好的主意。

【解决方案3】：

只需更改 .box2 中的背景颜色设置，即可使下方的文本可见。可见度由 rgba 中的“a”决定，从 0 到 1，即 0.1 非常透明，0.9 几乎没有透明度。

 .box2 {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50px;
      left: 50px;
      **background-color: rgba(255,255,255,0);**
      border: solid blue 1px;
      z-index: 4;

}

【讨论】：