Html z指数没有影响

当尝试使用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>

最佳游戏服务器

试试

#hero computers{z-index:-1；}

或者尝试添加

#英雄标题{z-index:2；位置：relative；}

---

你应该在这里使用

英雄标题

，而不是

英雄内容

？很好用！谢谢