Index Z et javascript pour le rollover

J'ai un conteneur (div) avec une image de fond. Dans ce div il y a un menu - une liste horizontale. Ce dont j'ai besoin, c'est d'insérer une image surMouseOver, de la positionner absolument, et de la montrer derrière le texte (bien sûr!) ET sur l'image de fond de la div. J'utilise aussi jQuery, mais je pense que cela n'a pas d'importance. Le problème peut être consulté en ligne. Aller à http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex et collez le texte suivantIndex Z et javascript pour le 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>

Source

2010-04-13 Raffaele

Il semble que vous avez besoin position:relative;, absolute ou fixed sur un div pour la z-index prenne effet.

Source

2010-04-13 09:58:53

Merci. Il a résolu mon problème – Raffaele

Je suis heureux d'avoir pu aider. –

mentionnant the W3C:

z-index ne fonctionne que sur positionnés éléments (position:absolute , position:relative ou position:fixed).

Source

2010-04-13 10:00:54

Vous avez raison. Je l'ai oublié!! Merci – Raffaele

J'ai fait ce travail pour votre exemple. J'espère que cela aide.

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

Vous ne pouvez utiliser z-index sur des éléments positionnés, ici l'emballage n'est pas positionné, mais il est pris en sandwich entre les deux divs. Comme je l'ai dit, cela fonctionne pour l'exemple affiché, et n'est pas 100% précis, vous devrez ajouter le positionnement pour vos autres éléments dans votre projet. :)

Source

2010-04-13 10:03:02 Kyle

Merci, cela résout définitivement mon problème – Raffaele

Pas de problème, heureux d'aider. – Kyle

Répondre

Questions connexes