【问题标题】：Z-Index and javascript for rolloverZ-Index 和 javascript 用于翻转
【发布时间】：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 的背景图片之上
文字背后

正文>

标签： javascript css z-index rollover

【解决方案1】：

您似乎需要在 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" 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% 准确，您必须为项目中的其他元素添加定位。 :)

【讨论】：