Ordre des éléments HTML empilés

Je regarde un screencast jQuery (jQuery for Absolute Beginners: Day 8). Il a ce code:Ordre des éléments HTML empilés

<script type="text/javascript"> 
    $(function() { 
     $('.wrap').hover(function() { 
      $(this).children('.front').stop().animate({ "top" : '300px'}, 900); 
     }, function() { 
      $(this).children('.front').stop().animate({ "top" : '0'}, 700);  
     }); 
    }); 
</script> 

<style type="text/css"> 

#container { 
width: 850px; 
text-align: center; 
margin: auto; 
} 

.wrap { 
width: 250px; 
height: 140px; 
position: relative; 
overflow: hidden; 
padding: 0 1em; 
} 

img { 
position: absolute; 
top: 0; left: 0; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
    <div class="wrap"> 
     <img src="back.jpg" alt="image" /> 
     <img src="front.jpg" class="front" alt="image" /> 
    </div> 
</div> 
</body> 
</html>

Pourquoi est-ce que front.jpg apparaît au-dessus de back.jpg? Est-ce simplement parce que front.jpg est dans une balise qui vient après l'étiquette de back.jpg?

Source

2009-06-02 hekevintran

Cela devrait vraiment être taggés html, css. Je vous recommande également de vous familiariser avec html/css avant de vous lancer dans jquery, car il est généralement utilisé pour manipuler les deux. –

Lorsque z-index est omis, les frères et sœurs suivantes sont automatiquement sur une couche supérieure à la fratrie précédentes. C'est un comportement attendu.

Pour citer les pages du MDC ci-dessous:

Quand aucun élément a un z-index, les éléments sont empilés dans cet ordre (de bas en haut):

fond et les bordures de l'élément racine

blocs descendants dans le flux normal, par ordre d'apparition (en HTML)

éléments descendants positionnés, par ordre d'apparition (en HTML)

Voir: https://developer.mozilla.org/en/understanding_css_z-index et en particulier, la première section, https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index

Source

2009-06-02 02:07:40

Pourriez-vous s'il vous plaît répondre http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8? – Lijo

Oui, il est un peu un coup de chance ... z-index devrait vraiment être mis à la fois pour vous assurer.

Source

2009-06-02 01:50:08 singpolyma

Ordre des éléments HTML empilés

Répondre

Questions connexes