小编1ub*_*bos的帖子

我想通过z-index CSS属性创建一个自相矛盾的效果.

在我的代码中,我有五个圆圈,如下图所示,并且它们都是绝对定位的,没有定义z-index.因此,默认情况下,每个圆圈都与前一个圆圈重叠.

现在,圆圈5与圆圈1重叠(左图).我想要实现的悖论是同时在圆圈2下面和圆圈5上面圈出1圈(如右图所示).

http://paradox.schramek.cz/1.jpg

这是我的代码

标记:

<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
<div class="item i4">4</div> 
<div class="item i5">5</div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}

.i1 { position: absolute; top: 30px; left: 0px; }
.i2 { position: absolute; top: 0px; left: 35px; }
.i3 { position: absolute; top: 30px; left: 65px; }
.i4 { position: absolute; top: 70px; left: …