Z-Index hat keinen Effekt

Question

Wenn Sie versuchen, Text vor Dinge mit der Z-Index-Eigenschaft zu positionieren, scheint es, dass der Z-Index auf nichts wirkt. Hier ist mein Code, den ich verwende.

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

Der 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. Versuchen #hero-computers { z-index: -1; }
2. oder versuchen Sie hinzufügen #hero-title { z-index: 2; position: relative; }