CSS/jQuery를 사용하여 다른 div 위에 여러 div를 만들 수 있습니까?

Question

기본적으로 한 번에 하나만 볼 수 있도록 많은 (> 25) div가 하나씩 표시되도록하고 싶습니다. jQuery UI draggable을 구현 했으므로 div가 드래그되면 다음 div가 표시됩니다. 이러한 CSS 스택을 만들기 위해 어떤 CSS가 필요합니까? 필요한 경우 jQuery도 사용할 수 있습니다. 감사합니다.

Answer 1

이 시도 :

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'); 
} 

이 편집 :

난 그냥 것으로 나타났습니다 어떤 이유로 IE와 Safari에서 .draggable()은 relative으로 위치가 바뀌어 absolute을 무시하므로 드래그 할 수있게 한 후에 absolute으로 다시 설정해야합니다.

위의 예를 업데이트했습니다.

http://jsfiddle.net/p9wWA/

Answer 2

이런 뜻입니까?

#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 */