z-index 没有效果

Question

当尝试使用 z-index 属性将文本定位在事物前面时，z-index 似乎对任何事物都没有影响。这是我正在使用的代码。

CSS代码

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

HTML代码

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

Answer 1

尝试#hero-computers { z-index: -1; }
或尝试添加 #hero-title { z-index: 2; position: relative; }

z-index 没有效果

z-index having not effect

html

css

z-index