html - 在 flexbox 悬停期间，我的文本隐藏在背景后面

Question

我设置了一个 flexbox 代码(图 1)，当鼠标悬停在上面时会 flex ，并在其上显示彩色叠加层和文本。问题是文本显示在彩色覆盖层下方，我希望它位于顶部(图 2)。我尝试更改 z-index，但出于某种原因，这只会隐藏叠加层。我的代码如下。

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

Answer 1

我制作了容纳文本的容器 flex。无需将 h1 设为 flex。容器会将其居中或四处移动。看下面的代码

* {
  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;
   display: flex;
    align-items: center;
    justify-content: center;
}


#Text{
display: none;
z-index: 2;

}

.home-mast__container > *:hover #Text{
background-color: black;
text-align: right;
color: white;
z-index: 1;
font-size: 80px;
display: block
}

.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">
<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>
  </div>
</div>