Its_ToXiiC Its_ToXiiC - 3 months ago 23
CSS Question

z-index having not effect

When trying to position text infront of things using the z-index property, It seems that the z-index has not effect on anything. Here is my code that I am using.

The CSS Code

#hero-content {
position: fixed;
top: 50%;
left: 50%;
width: 100%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}

#hero-computers {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 600px;
height: auto;
opacity: 0.7;
z-index: 0;
}


The HTML Code

<div id="hero-content">
<div id="hero-title">Best Game Servers</div>
<img id="hero-computers" src="img/hero-computer.png">
</div>

Answer
  1. Try #hero-computers { z-index: -1; }
  2. Or Try add #hero-title { z-index: 2; position: relative; }
Comments