Html 文本不是'；透明条上方的t_Html_Css

Html 文本不是'；透明条上方的t

html css

Html 文本不是'；透明条上方的t,html,css,Html,Css,我试图在一个透明的彩色条上放置一个div，但是即使这个条的z索引较低，div也会出现在它上面 HTML: <html> <body> <div id='foo'>Lorem ipsum dolor sit amet</div> <div id='bar'></div> </body> </html> body { background: black; } #foo {

我试图在一个透明的彩色条上放置一个div，但是即使这个条的z索引较低，div也会出现在它上面

HTML:

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

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

Fiddle:

问题是

z-index

仅在

位置

不同于

静态

（*）时才起作用

您可以使用

位置：相对

来修复它

（*）根据

“z指数”

适用于：定位元素

给你：

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

：：很好的解释+1.

#foo {
    position: relative;
}