如何覆盖已覆盖父div的兄弟div?我有这个<div>
驻留在它的父div中并完美地覆盖它。我想用另一个<div>
覆盖这个div(有人选择div时的动作)。这个叠加层将是不透明的,但由于某些原因我似乎无法覆盖它。我尝试过使用margin-top:-100%
,但它不会做到这一点。有什么想法吗?
.one-third-text {
width: 33.3333%;
height: 50%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.text-btn-bg{
background: #2ecc71;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.text-btn {
display: flex;
height: 100%;
width: 100%;
color: #fff;
margin: 0;
padding: 0;
cursor: pointer;
-webkit-transition: -webkit-transform .07s ease-out;
-moz-transition: -moz-transform .07s ease-out;
-o-transition: -o-transform .07s ease-out;
transition: transform .07s ease-out;
}
h3.h3-text-btn {
vertical-align: middle;
display: table-cell;
padding: 10px 30px;
margin: auto;
}
.text-btn:active, .text-btn.text-btn-android {
-webkit-transform: scale(0.9, 0.80);
transform: scale(0.90, 0.80);
/*opacity: 0.80;*/
color:#2ecc71;background:#f6f6f6;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<div class="one-third-text">
<div class="text-btn-bg animated-second bounceInUp">
<div class="text-btn txt-btn2">
<h3 class="h3-text-btn">Food & Drinks</h3>
</div>
<!-- This div should overlay the above div -->
<div class="text-btn txt-btn2" style="margin-top:-100%;">
<h3 class="h3-text-btn">SELECTED</h3>
</div>
</div>
</div>