Text Above Image Css Z-index Not Working

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... Main HTML:

Solution 1:

I am assuming that you cannot just swap the order of the title and image elements, so you are forced to use css positioning.

Here is a live example with both elements position: relative (so that they respect z-index) and with a z-index set on the image:

.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: 0px0px20px#000;
    margin: 20px20px20px20px;
}
.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: -45px0;
    padding: 0;
    position: relative;
    z-index: -1;
}
.gallery-options-img-style{
    width: 100%;
    height: auto;
}

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

Solution 2:

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: 0px0px20px#000;
    margin: 20px20px20px20px;
}
.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: -45px0;
    padding: 0;
}
.gallery-options-img-style{
    width: 100%;
    height: auto;
}

<divclass="menu-defaults menu-overlay"><divclass="menu-container"><divclass="menu-gallery"><ahref=""><divclass="menu-gallery-options"><divclass="menu-gallery-options-title"><spanclass="gallery-options-title-style"style="z-index: 1;">HOME</span></div><divclass="menu-gallery-options-img"><imgsrc="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>