0
我有一个Flexbox代码设置（图像1），当它悬停在上方时弹性显示并在其上显示彩色覆盖图和文本。问题在于文本显示在彩色叠加层下面，我希望它位于顶部（图2）。我试着改变z-index，但是由于某种原因，这只会隐藏覆盖层。我的代码如下。在flexbox悬停期间，我的文本隐藏在背景后面
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.absolute-bg {
z-index: -1;
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100%;
width: 100%;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
#Text {
display: none;
z-index: 2;
}
.home-mast__container>*:hover #Text {
background-color: black;
margin-bottom: -90%;
display: flex;
text-align: right;
color: white;
margin-top: 50%;
z-index: 1;
font-size: 80px;
justify-content: center
}
.home-mast {
height: 100vh;
}
.home-mast__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
}
.home-mast__container>* {
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 1em;
-webkit-transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, - - webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit- box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit- box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -ms-flex-positive 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.home-mast__container>*:hover {
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
}
.home-mast__container>*:nth-child(1):after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100%;
width: 100%;
color: white;
background-color: #ff2400;
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
.home-mast__container>*:nth-child(1):hover:after {
opacity: 0.65;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}<div class="home-mast__container">
<a href="http://23348472.nhd.weebly.com/ebenezer-tucker.html">
<div>
<div class="absolute-bg" style="background-image:url('http://23348472.nhd.weebly.com/uploads/9/9/7/3/99738320/eb-tuck_1_orig.png');">
<h2 id="Text">Ebenezer Tucker</h2>
</div>
</div>
</a>