Question

我有一个带背景图像的容器（div）。在这个div中有一个菜单 - 一个水平列表。我需要的是在onMouseOver上插入一个图像，绝对定位，然后在文本后面显示它（当然！）并在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>

Answer 1

您似乎需要position:relative;，absolute或fixed才能使z-index生效。

Answer 2

引用the W3C：

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

Answer 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％准确，您将不得不为项目中的其他元素添加定位。：）

Z-Index和javascript用于翻转

3 个答案: