0

我有一个带有背景图像的容器（div）。在这个 div 中有一个菜单 - 一个水平列表。我需要的是在鼠标悬停上插入一个图像，将其绝对定位，并将其显示在文本后面（当然！）和 div 的背景图像之上。我也使用 jQuery，但我认为这无关紧要。问题可以在线查看。转到http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex并粘贴以下文本

<html>
<头部>
  <style type="text/css">
    图像{
      顶部：0；
      左：0；
      位置：绝对；
      z-索引：-1；
    }

    ＃主要的 {
      红色;
      边距：30px；
      填充：20px；
      宽度：700px；
      最小高度：400px；
      z 指数：-2；
      背景图片：url（“http://www.google.com/logos/mother10-hp.gif”）；
      背景重复：不重复；
    }
  </style>
</head>

<正文>
  <div id="main">
    <h1>Z-Index 问题：</h1>
    <img src="w3css.gif" width="100" height="140" />
    <p>我们如何在文本和 div#main 之间放置绿色图片？</p>
    <p>我需要绿色 gif 出现</p>
    <ol>
      <li>在#main 的背景图片之上</li>
      <li>文字背后</li>
    </ol>
  </div>
</正文>

</html>
4

3 回答 3

3

看来您需要position:relative;,absolute或fixed在 div 上z-index才能生效。

于 2010-04-13T09:58:53.060 回答
2

引用W3C：

z-index 仅适用于定位元素（position:absolute、 position:relative或position:fixed）。

于 2010-04-13T10:00:54.697 回答
0

我为你的例子做了这个工作。希望能帮助到你。

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

于 2010-04-13T10:03:02.927 回答