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

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

这是一个实例，其中包含两个元素position: relative（因此它们尊重z-index）并且在图像上设置了z-index：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

可能使用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>

图像上方的文字CSS Z-Index不起作用

2 个答案: