Z-Index和javascript for rollover

我有一個背景圖像的容器（div）。在這個div裏有一個菜單 - 一個水平列表。我需要的是在MouseOver上插入一張圖片，絕對定位它，並在文本後面顯示它（當然！），並在div的背景圖片上。我也使用jQuery，但我認爲這並不重要。該問題可以在線查看。轉到http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex並粘貼以下文本Z-Index和javascript for rollover

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

來源

2010-04-13 Raffaele

看來你需要position:relative;，absolute或fixed在一個div爲z-index生效。

來源

2010-04-13 09:58:53

謝謝。它解決了我的問題 – Raffaele 2010-04-13 11:08:38

很高興我能幫上忙。 – 2010-04-13 12:26:14

引用the W3C：

z索引僅適用於定位元件（position:absolute， position:relative，或position:fixed）。

來源

2010-04-13 10:00:54

你是對的。我忘了！！謝謝 – Raffaele 2010-04-13 11:09:25

我爲你做了這個工作。希望能幫助到你。

<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％準確，您將不得不爲項目中的其他元素添加定位。 :)

來源

2010-04-13 10:03:02 Kyle

謝謝，這個解決了我的問題 – Raffaele 2010-04-13 11:09:08

沒問題，很樂意幫忙。 – Kyle 2010-04-13 12:49:03

Z-Index和javascript for rollover

回答

相關問題