我有以下情况:
<html>
<head>
<title>
Title
</title>
<style type="text/css">
#wrapper {
width: 100%;
}
#thingy {
position: absolute;
top: 20px;
background-image: url("bg.png");
width: 100%;
height: 4px;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="test.png" alt=""/>
<div id="thingy"> </div>
</div>
</body>
</html>
test.png是相同的图像,bg.png是1x4背景图像.
问题是:元素#thingy显示在图像的前面,因此一条直线穿过图像.这不应该发生,#thingy应该显示在图像后面.使用z-index不会做任何事情......
任何提示？
谢谢,约斯特
编辑:更多细节:目标是获得一个标题横幅(上面的test.png),其下面有一条水平线.该行必须跨越标题区域的整个宽度(因此宽度:100%),横幅必须保持居中.
声明position: relative图像并为其指定z-index可以纠正行为.见下文:
#thingy {
position: absolute;
top: 50px;
background-image: url("bg.png");
width: 100%;
height: 4px;
z-index: 1;
}
#wrapper img {
position: relative;
z-index: 2500;
}