我想通过z-index
CSS属性创建一个自相矛盾的效果。
在我的代码中,我有五个圆圈,如下图所示,它们都绝对定位,没有定义z-index
。因此,默认情况下,每个圆都与前一个圆重叠。
现在,圆5与圆1重叠(左图)。我想实现的悖论是,同时在圆2下方和圆5上方具有圆1(如右图所示)。
(来源:schramek.cz)
这是我的代码
标记:
<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: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }
也可以从http://jsfiddle.net/Kx2k5/获得一个实时示例。
我尝试了很多有关堆叠顺序,堆叠上下文等的技术。我读了一些有关这些技术的文章,但没有成功。我该如何解决?