Question

我正在尝试将div放在透明的彩色条上方，但即使条形图具有较低的z-index，div也会显示在它上方。

HTML：

<html>
  <body>
    <div id='foo'>Lorem ipsum dolor sit amet</div>
    <div id='bar'></div>
  </body>
</html>

CSS：

body {
    background: black;
}
#foo {
    z-index: 2;
    font-size: 40px;
    color: white;
}
#bar {
    z-index: 0;
    position: absolute;
    top: 0px;
    opacity: 0.6;
    height:100%;
    width: 300px;
    background: red;
}

小提琴： http://jsfiddle.net/XjncA。

Answer 1

问题是z-index仅在position与static（*）不同时才有效。

您可以使用position: relative进行修复。 Demo

（*）根据http://www.w3.org/TR/CSS2/visuren.html#z-index，

'z索引'

      价值：汽车| |继承
      初始：自动
      适用于：定位元素
      继承：没有       百分比：N / A
      媒体：视觉
      计算值：如指定的那样

Answer 2

在这里：http://jsfiddle.net/XjncA/1/

您需要将以下样式添加到#foo：

#foo {
    position: relative;
}

文字不在透明栏上方

2 个答案: