代码之家 › 专栏 › 技术社区 › Raffaele

用于滚动的z-index和javascript

rollover z-index css javascript

Raffaele · 技术社区 · 16 年前

我有一个带有背景图像的容器(DIV)。在这个分区中有一个菜单-一个水平列表。我需要的是在鼠标上方插入一个图像,绝对定位它,并在文本后面显示它(当然!)在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 回复 | 直到 16 年前

Jim Blackler 16 年前

看来你需要 position:relative; , absolute 或 fixed 在一个分区 z-index 生效。

Yuval Adam 16 年前

引用 the W3C :

Z-index仅适用于定位要素( position:absolute , position:relative 或 position:fixed )

Kyle 16 年前

我为你做了这个例子。希望它有帮助。

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

推荐文章