gpt4 book ai didi

html - 文字不在透明条上方

转载 作者:太空宇宙 更新时间:2023-11-04 14:19:39 25 4
gpt4 key购买 nike

我试图将一个 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;
}

fiddle : http://jsfiddle.net/XjncA .

最佳答案

问题是 z-index 只有在 position 不同于 static (*) 时才有效。

您可以使用position: relative 来修复它。 Demo


(*) 根据http://www.w3.org/TR/CSS2/visuren.html#z-index ,

'z-index'

    Value: auto | | inherit
    Initial: auto
    Applies to: positioned elements
    Inherited: no
    Percentages: N/A
    Media: visual
    Computed value: as specified

关于html - 文字不在透明条上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20025912/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com