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

不使用此标记，除非MC Escher开发 Web 浏览器，因为您正试图实现所有项目的递归不可能覆盖前一个项目。这可能是用纸实现的，而不是线性堆叠的元素。一个元素要么在上面，要么不在。

最简单可行的解决方案是再次复制最低的圆圈，z-index并用 az-index:5留在所有东西的顶部，并将其包裹在一个容器中，用overflow:hidden它切掉不应该再次可见的一半。