0

背景画像付きのコンテナ (div) があります。この div には、メニュー (水平方向のリスト) があります。私が必要とするのは、画像 onMouseOver を挿入し、それを絶対に配置し、テキストの後ろ (もちろん!) と div の背景画像の上に表示することです。私もjQueryを使っていますが、これは関係ないと思います。問題はオンラインで見ることができます。http://www.w3schools.com/css/tryit.asp?filename=trycss_zindexに移動し、次のテキストを貼り付けます

<html>
<頭>
  <style type="text/css">
    画像 {
      上: 0;
      左: 0;
      位置:絶対;
      z-index:-1;
    }

    ＃主要 {
      赤色;
      余白: 30px;
      パディング: 20px;
      幅: 700px;
      最小高さ: 400px;
      z インデックス: -2;
      背景画像: url("http://www.google.com/logos/mother10-hp.gif");
      バックグラウンドリピート: リピートなし;
    }
  </style>
</head>

<本体>
  <div id="メイン">
    <h1>Z インデックスの質問:</h1>
    <img src="w3css.gif" width="100" height="140" />
    <p>テキストと div#main の間に緑色の画像を配置するにはどうすればよいですか?</p>
    <p>緑色の gif を表示する必要があります</p>
    <オール>
      <li>#main の背景画像の上に</li>
      <li>テキストの後ろ</li>
    </ol>
  </div>
</body>

</html>
4

3 に答える 3

3

が有効になるにはposition:relative;、absoluteまたはfixeddivが必要なようです。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 を使用できます。ここでは、ラッパーは配置されていませんが、2 つの div の間に挟まれています。私が言ったように、これは投稿された例で機能しますが、100% 正確ではありません。プロジェクト内の他の要素の配置を追加する必要があります。:)

于 2010-04-13T10:03:02.927 に答える