上面的圖像文本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>