Comment puis-je créer plusieurs divs les uns sur les autres en utilisant CSS/jQuery?

Question

Fondamentalement, je veux que beaucoup (> 25) divs soient affichés les uns sur les autres de sorte qu'un seul peut être vu à la fois. J'ai implémenté l'interface utilisateur de jQuery UI, donc une fois qu'une div est retirée, la div suivante est affichée. De quel CSS ai-je besoin pour faire une telle pile de divs? jQuery est également disponible si nécessaire. Merci!

Answer 1

Essayez ceci:

CSS

div.square { 
    cursor: pointer; 
    width: 100px; 
    height: 100px; 
    border: 2px dashed purple; 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    font-size: 50px; 
    line-height: 100px; 
    text-align: center; 
    color: white; 
} 

jQuery + jQueryUI

var count = 25; 

var colors = ['red','green','blue','orange','yellow']; 

while(count--) { 
    $('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]}) 
            .appendTo('body'); 
} 

EDIT:

Je viens de remarquer que pour une raison quelconque dans IE et Safari .draggable() remplace le positionnement absolute avec relative, vous devez donc le remettre à absolute après l'avoir fait glisser.

Mise à jour de l'exemple ci-dessus.

http://jsfiddle.net/p9wWA/

Answer 2

Vous voulez dire quelque chose comme ça?

#relative_container { position: relative; } 
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } 
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */