我有一个设计要求,其中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/
答案 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
之外。给它们相同的位置,高度和宽度。
.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;
答案 2 :(得分:0)
只需更改.box2中的背景颜色设置,即可在下方显示文字。可见性将由rgba中的'a'决定,并且从0到1运行,即0.1非常透明,0.9几乎没有透明度。
java-10
}