3

基本に戻ると、そのすぐ下の要素の背景の上に表示する必要がある画像がある状況があります。ただし、画像がその要素のコンテンツの上に表示されるのではなく、要素 (および背景プロパティ) 自体のみが表示されるようにします。

http://jsfiddle.net/chricholson/4twr5/1/

HTML:

<img src="https://www.google.com/images/srpr/logo3w.png" />

<div>
    <a href="#">Hello World</a>
</div>
​

CSS:

img { position: absolute; z-index: 20; }

div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }

a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }

予想される動作は、画像が div の背景[check]の上に表示されることですが、黄色のリンクの後ろに表示されますが、そうではありません。

4

5 に答える 5

5

ここで私の「答え」を見つけました（私の疑問をさらに確認します） 。別のdiv内のdivでz-indexを機能させることができません。重要な文は、「test_1でposition：relativeを設定すると、そのz-indexがtest_2のz-indexとは異なる世界になります。」です。

問題があるのは、divよりも高い画像を設定すると、divの内容にどのz-index値を設定しても、常にカバーされるためと思われます。z-indexがこのように機能するとは思いませんでした。すべてが「個別」であり、値が他の場所の値よりも高い限り（親コンテナーに関係なく）、問題はないと思いました。

于 2012-08-30T15:52:01.163 に答える
0
于 2012-08-30T15:38:04.403 に答える
0

http://jsfiddle.net/4twr5/21/このjsfiddleを見てください

コメントに従って更新http://jsfiddle.net/4twr5/22/

于 2012-08-30T15:26:41.877 に答える
0

次のように画像をdiv内に配置します。

<div>
    <img src="https://www.google.com/images/srpr/logo3w.png" />
    <a href="#">Hello World</a>
</div>
于 2012-08-30T15:27:35.867 に答える
0 
img { position: absolute; z-index: 15; }

div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; }

a {z-index: 30; padding: 10px; background: yellow; display: block; }
​

このコードを試すことができます。ちなみに a は div の子です。position: relative; と入力する必要はありません。あなたがdivのために書いたからです。

于 2012-08-30T15:20:11.983 に答える