z指数不起作用

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

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