z-index没有效果

时间:2016-08-28 04:50:43

标签: html css z-index

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

1 个答案:

答案 0 :(得分:2)

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