css z-index重叠div

Question

下面的图片是我的目标。我有4个div都是圆形的。我想将它们对齐，如下图所示。只有css的z-index才有可能吗？如果有人有一些见解，我一直在努力想出一个解决方案。你可以看到我在小提琴中的进步。

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的容器中以进行切割关闭一半不应该再次可见的。