z-index having not effect

Question

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

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