css z-index重疊divs

Question

下圖是我的目標。我有4個div全部設置爲圈子。我想按照下面的圖片對齊它們。這可能與只是CSS的Z指數？如果有人有一些見解，我一直在努力想出一個解決方案。你可以在小提琴中看到我的進步。

http://jsfiddle.net/v7d4s210/1/

<div id="circleContainer"> 
    <div class="circle spin yellow"></div> 
    <div class="circle spin orange"></div> 
    <div class="circle spin red"></div> 
    <div class="circle spin purple"></div> 
</div> 

.circle { 
     border-radius: 50%; 
     display: inline-block; 
     margin-right: 20px; 
    } 
    #circleContainer { 
     width:600px; 
     display: block; 
     margin: 0 auto; 
     background: #f5f5f5; 
     position: relative; 
     top:200px; 

    }  
    .yellow{ 
     width: 250px; 
     height: 250px; 
     background:red; 
     position: absolute; 
     z-index: 4; 
     top:-100px; 
    } 
    .orange{ 
     width: 250px; 
     height: 250px;   
     background:blue; 
     position: absolute; 
     z-index: 3; 
     left:100px 
    } 
    .red{ 
     width: 250px; 
     height: 250px;   
     background:green; 
     position: absolute; 
     z-index: 2; 
     left: -100px; 
    } 
    .purple{ 
     width: 250px; 
     height: 250px;   
     background:pink; 
     position: absolute; 
     z-index: 1; 
     top:100px; 
    } 

Answer 1

無法使用此標記，除非M.C. Escher是開發一個網頁瀏覽器，因爲你正在努力實現所有項目的一半覆蓋前一個遞歸是不可能的。這可能是紙上的可能，而不是線性堆疊的元素。一個元素是在頂部或不是。

最簡單可行的解決辦法是複製再次與最低z-index圈用z-index:5留在一切之上，並與overflow:hidden把它包裝容器切斷它的一半，應該是不可見再次。