Z-Index 和用于翻转的 javascript

发布于 2024-08-28 11:39:16 字数 1134 浏览 8 评论 0原文

我有一个带有背景图像的容器（div）。在这个 div 中有一个菜单 - 一个水平列表。我需要的是在MouseOver 上插入一个图像，将其绝对定位，并将其显示在文本后面（当然！）以及div 背景图像的顶部。我也使用jQuery，但我认为这并不重要。问题可以在线查看。

<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>

原文

I have a container (div) with a background image. In this div there is a menu - a horizontal list. What I need is to insert an image onMouseOver, positioning it absolutely, and showing it behind the text (of course!) AND on top of the div's background image. I also use jQuery, but I think this doesn't matter. The problem can be viewed online.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

本王不退位尔等都是臣 2024-09-04 11:39:16

看来您需要在 div 上使用 position:relative;、absolute 或 fixed 来获取 z-index影响。

回复收藏 0 原文

逐鹿 2024-09-04 11:39:16

引用 W3C：

z-index仅适用于定位
元素（位置：绝对，
位置：相对或位置：固定）。

回复收藏 0 原文

甜警司 2024-09-04 11:39: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% 准确，您必须为项目中的其他元素添加定位。 :)

I made this work for your example. Hope it helps.

<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>

You can only use z-index on positioned elements, here the wrapper is not positioned, yet it is sandwiched between the two divs. As I said, this works for the example posted, and isn't 100% accurate, you will have to add positioning for your other elements in your project. :)

回复收藏 0 原文

~没有更多了~