文本在图像CSS Z-Index不工作 [英] Text Above Image CSS Z-Index Not Working
本文介绍了文本在图像CSS Z-Index不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图强制文本上面的图像,但是,它不想工作,我已经尝试z-index 100文本和-100在图像上,但它仍然不工作。 。
I am trying to force the text above the image, however, It doesn't want to work, I have tried z-index 100 on the text and -100 on the image, but It still doesn't work...
主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;
}
任何帮助是赞赏,我看起来高低,但找不到任何东西。:(
感谢
Any help is appreciated, I have looked high and low but can't find anything.. :( Thanks
推荐答案
code>将帮助检查此代码段
probably using position and z-index
will help check this snippet
.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>
这篇关于文本在图像CSS Z-Index不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文