css z-index 重叠 div

Question

下图是我的目标。我有 4 个 div 都被设计成圆圈。我想像下图那样对齐它们。这可能只用 css 的 z-index 吗？如果有人有一些见识，我一直在努力想出一个解决方案。你可以在 fiddle 中看到我的进步。

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是开发一个 web 浏览器，因为你正试图实现所有元素的递归不可能，一半覆盖前一个元素。这可能用纸来实现，而不是线性堆叠的元素。元素要么在顶部，要么不在顶部。

最简单可行的解决方案是再次使用 z-index:5 复制具有最低 z-index 的圆圈，以保持在所有内容之上，然后换行它在一个带有 overflow:hidden 的容器中，以切断它不应该再次可见的一半。