关于css：Z-Index和用于翻转的javascript

Z-Index and javascript for rollover

我有一个带有背景图像的容器(DIV)。在这个分区中有一个菜单-一个水平列表。我需要的是在鼠标上方插入一个图像，绝对定位它，并在文本后面显示它(当然！)在DIV的背景图像上。我也使用jquery，但我认为这并不重要。可以在线查看问题。访问http://www.w3schools.com/css/tryit.asp？文件名=trycss_zindex并粘贴以下文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<html>
<head>
<style type="text/css">
img {
top: 0;
left: 0;
position:absolute;
z-index:-1;
}

#main {
color: red;
margin: 30px;
padding: 20px;
width: 700px;
min-height: 400px;
z-index: -2;
background-image: url("http://www.google.com/logos/mother10-hp.gif");
background-repeat: no-repeat;
}
</style>
</head>

<body>

Z-Index question:
<img src="w3css.gif" width="100" height="140" />
<p>
How can we place the green pic between the text and the div#main?
</p>
<p>
I need the green gif to appear
</p>

<li>
On top of #main's background image
</li>

<li>
Behind the text
</li>

</body>

</html>

似乎你需要position:relative;、absolute或fixed在DIV上生效。

相关讨论

我为你做了这个例子。希望它有帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<html>
<head>
<style type="text/css">
.img1 {
top: 0;
left: 0;
position:absolute;
z-index:2;
}

#wrapper {
background-image: url("http://www.google.com/logos/mother10-hp.gif");
background-repeat: no-repeat;
z-index:1;
width:600px;
height:600px;

}

#main {
color: red;
margin: 30px;
padding: 20px;
width: 700px;
min-height: 400px;
z-index: 3;
position:absolute;
}
</style>
</head>

<body>

<img src="w3css.gif" width="100" height="140" />

Z-Index question:
<p>
How can we place the green pic between the text and the div#main?
</p>
<p>
I need the green gif to appear
</p>

<li>
On top of #main's background image
</li>

<li>
Behind the text
</li>

</body>

</html>

只能对定位元素使用z-index，这里包装器没有定位，但是它夹在两个div之间。正如我所说，这对于发布的示例很有效，而且不是100%准确，您必须在项目中为其他元素添加位置。：)