在重叠div上方显示文本

时间:2018-03-05 08:30:22

标签: html css

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

Expected result

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

使用您当前的布局,它无法正常工作。由于.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;

答案 2 :(得分:0)

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

java-10

}