我试图强制文本位于图像上方，但是，它不想工作，我已经尝试在文本上设置 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;
}
感谢任何帮助，我到处寻找但找不到任何东西..:(
谢谢
我假设你不能只交换标题和图像元素的顺序，所以你被迫使用 css 定位。
这里有一个活生生的例子与两个元素position: relative（以便它们尊重 z 索引）并在图像上设置 z 索引：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
