Z-Index 和 javascript 用于翻转
Posted
技术标签:
【中文标题】Z-Index 和 javascript 用于翻转【英文标题】：Z-Index and javascript for rollover 【发布时间】：2011-02-07 09:06:19 【问题描述】：我有一个带有背景图像的容器 (div)。在这个 div 中有一个菜单 - 一个水平列表。我需要的是在MouseOver 上插入一个图像，将其绝对定位，并将其显示在文本后面（当然！）和div 的背景图像之上。我也使用 jQuery，但我认为这无关紧要。问题可以在线查看。转到http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex并粘贴以下文本
Z-Index 问题：
我们如何在文本和 div#main 之间放置绿色图片？
我需要绿色 gif 出现
-
在#main 的背景图片之上
文字背后
您似乎需要在 div 上使用 position:relative;、absolute 或 fixed 才能使 z-index 生效。
【讨论】：
【参考方案2】：引用the W3C:
z-index 仅适用于定位 元素 (
position:absolute,position:relative，或position:fixed)。
【讨论】：
【参考方案3】：我为你的例子做了这个工作。希望对您有所帮助。
<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" />
</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% 准确，您必须为项目中的其他元素添加定位。 :)
【讨论】：
以上是关于Z-Index 和 javascript 用于翻转的主要内容，如果未能解决你的问题，请参考以下文章