上面的图像文本CSS Z索引不工作

Question

我想强制图像上方的文本，但是，它不想工作，我已经尝试z-index 100上的文本和-100的图像上，但它仍然没有工作...

主要HTML：

<div class="menu-defaults menu-overlay"> 
     <div class="menu-container"> 
      <div class="menu-gallery"> 
       <a href=""> 
        <div class="menu-gallery-options"> 
         <div class="menu-gallery-options-title"> 
          <span class="gallery-options-title-style" style="z-index: 1;">HOME</span> 
         </div> 
         <div class="menu-gallery-options-img"> 
          <img src="data/_img/static_ex.jpg" style="z-index: -1;" class="gallery-options-img-style"> 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 

主要CSS：

.menu-defaults{ 
    width: 100%; 
    height: 100%; 
} 
.menu-container{ 
    width: 90%; 
    height: 100%; 
    margin: 0 auto; 
} 
.menu-gallery{ 
    margin-top: 160px; 
} 
.menu-gallery-options{ 
    width: 460px; 
    height: 259; 
    box-shadow: 0px 0px 20px #000; 
    margin: 20px 20px 20px 20px; 
} 
.menu-gallery-options-title{ 
    width: 100%; 
    height: auto; 
    text-align: center; 
} 
.gallery-options-title-style{ 
    font-size:32px; 
    font-weight: 900; 
    color: white; 
    font-family: arial; 
    text-decoration: none; 
} 
.menu-gallery-options-img{ 
    margin: -45px 0; 
    padding: 0; 
} 
.gallery-options-img-style{ 
    width: 100%; 
    height: auto; 
} 

任何帮助表示赞赏，我已经看过高和低，但无法找到什么.. :( 谢谢

Answer 1

可能使用position and z-index将帮助检查此片段

.menu-gallery-options-title{ 
    position:relative; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    z-index:999; 
} 

.menu-defaults{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.menu-container{ 
 
    width: 90%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.menu-gallery{ 
 
    margin-top: 160px; 
 
} 
 
.menu-gallery-options{ 
 
    width: 460px; 
 
    height: 259; 
 
    box-shadow: 0px 0px 20px #000; 
 
    margin: 20px 20px 20px 20px; 
 
} 
 
.menu-gallery-options-title{ 
 
    position:relative; 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    z-index:999; 
 
} 
 
.gallery-options-title-style{ 
 
    font-size:32px; 
 
    font-weight: 900; 
 
    color: white; 
 
    font-family: arial; 
 
    text-decoration: none; 
 
} 
 
.menu-gallery-options-img{ 
 
    margin: -45px 0; 
 
    padding: 0; 
 
} 
 
.gallery-options-img-style{ 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="menu-defaults menu-overlay"> 
 
     <div class="menu-container"> 
 
      <div class="menu-gallery"> 
 
       <a href=""> 
 
        <div class="menu-gallery-options"> 
 
         <div class="menu-gallery-options-title"> 
 
          <span class="gallery-options-title-style" style="z-index: 1;">HOME</span> 
 
         </div> 
 
         <div class="menu-gallery-options-img"> 
 
          <img src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" style="z-index: -1;" class="gallery-options-img-style"> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

我假设你不能只交换标题和图像元素的顺序，所以你不得不使用css定位。

这里是一个活示例与两个元件position: relative（使得它们尊重Z-索引）和与所述图像上设定的z-index：

.menu-defaults{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.menu-container{ 
 
    width: 90%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.menu-gallery{ 
 
    margin-top: 160px; 
 
} 
 
.menu-gallery-options{ 
 
    width: 460px; 
 
    height: 259; 
 
    box-shadow: 0px 0px 20px #000; 
 
    margin: 20px 20px 20px 20px; 
 
} 
 
.menu-gallery-options-title{ 
 
    width: 100%; 
 
    height: auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.gallery-options-title-style{ 
 
    font-size:32px; 
 
    font-weight: 900; 
 
    color: white; 
 
    font-family: arial; 
 
    text-decoration: none; 
 
} 
 
.menu-gallery-options-img{ 
 
    margin: -45px 0; 
 
    padding: 0; 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 
.gallery-options-img-style{ 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="menu-defaults menu-overlay"> 
 
     <div class="menu-container"> 
 
      <div class="menu-gallery"> 
 
       <a href=""> 
 
        <div class="menu-gallery-options"> 
 
         <div class="menu-gallery-options-title"> 
 
          <span class="gallery-options-title-style" style="z-index: 1;">HOME</span> 
 
         </div> 
 
         <div class="menu-gallery-options-img"> 
 
          <img src="https://i.imgur.com/5LGqY2p.jpg?1" style="z-index: -1;" class="gallery-options-img-style"> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div>