Z-Index和javascript用于过渡
[英]Z-Index and javascript for rollover
问题描述
我有一个带有背景图片的容器（div）。 在这个div中有一个菜单-水平列表。 我需要的是在MouseOver上插入一个图像，将其绝对定位，并将其显示在文本后面（当然！），并显示在div的背景图像之上。 我也使用jQuery，但我认为这无关紧要。 该问题可以在线查看。 转到http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex并粘贴以下文本
<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>
<div id="main">
<h1>Z-Index question:</h1>
<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>
<ol>
<li>On top of #main's background image</li>
<li>Behind the text</li>
</ol>
</div>
</body>
</html>
3 个解决方案
解决方案1
3 已采纳 2010-04-13 09:58:53
似乎您需要position:relative; ， absolute或fixed在div上，以使z-index生效。
解决方案2
2 2010-04-13 10:00:54
引用W3C ：
z-index仅适用于定位的元素（
position:absolute，position:relative或position:fixed）。
解决方案3
0 2010-04-13 10:03:02
我为您的示例做了这项工作。 希望能帮助到你。
<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>
<div id="wrapper">
<div class="img1">
<img src="w3css.gif" width="100" height="140" />
</div>
<div id="main">
<h1>Z-Index question:</h1>
<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>
<ol>
<li>On top of #main's background image</li>
<li>Behind the text</li>
</ol>
</div>
</div>
</body>
</html>
您只能在定位的元素上使用z-index，这里的包装器没有定位，但是它夹在两个div之间。 就像我说的那样，此方法适用于所发布的示例，并且并非100％准确，您将不得不为项目中其他元素添加位置。 :)
Javascript Z-Index
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.