CSS z-index悖论花

Question

我想通过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: 50px; }
.i5 { position: absolute; top: 70px; left: 15px; }

http://jsfiddle.net/Kx2k5/也提供了一个实例.

我尝试了很多堆叠订单,堆叠上下文等技术.我读了一些关于这些技术的文章,但没有成功.我怎么解决这个问题？

Answer 1

这里是我的尝试:http://jsfiddle.net/Kx2k5/1/
(试验成功的Fx27,Ch33,IE9,Sf5.1.10和Op19)

CSS

.item {
   /* include borders on width and height */  
   -webkit-box-sizing : border-box;
   -moz-box-sizing    : border-box;
   box-sizing         : border-box;
   ...
}

.i1:after {
   content: "";

   /* overlap a circle over circle #1 */
   position : absolute;
   z-index  : 1;
   top      : 0;
   left     : 0;
   height   : 100%;
   width    : 100%;

   /* inherit border, background and border-radius */
   background    : inherit;
   border-bottom : inherit;
   border-radius : inherit;

   /* only show the bottom area of the pseudoelement */
   clip          : rect(35px 50px 50px 0);
}

基本上我:after在第一个圆圈上重叠了一个伪元素(继承了一些属性),然后我用clip()属性剪切了它,所以我只使其底部可见(圆圈#1与圆圈重叠#5).

对于我在这里使用的CSS属性,这个例子应该是工作即使在IE8( ,box-sizing,clip(),inherit和pseudoelements是否有支持)

结果效果的屏幕截图

Answer 2

我的尝试也在使用clip.这个想法是有一半和一半div.这样设置z-index就可以了.

所以你可以设置顶部z-index: -1和底部z-index: 1.

结果:

.item {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 1px solid red;
  background: silver;
  border-radius: 50%;
  text-align: center;
}
.under {
  z-index: -1;
}
.above {
  z-index: 1;
  overflow: hidden;
  clip: rect(30px 50px 60px 0);
}
.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;
}

<div class="item i1 under">1</div>
<div class="item i1 above">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>

在这里演示

注意:在IE 10 +,FF 26 +,Chrome 33+和Safari 5.1.7+上测试过.

Answer 3

这是我的目标.

我还使用位于第一个圆圈顶部的伪元素,但不是使用剪辑,我保持其背景透明,只是给它一个插入框阴影,与圆圈的背景颜色(银色)以及红色相匹配边框覆盖圆圈边框的右下角.

演示

CSS(与起点不同)

.i1 { 
  position: absolute; top: 30px; left: 0px;
  &:before {
    content: '';
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius:  50%;
    box-shadow: inset 5px -5px 0 6px silver;
    border-bottom: solid 1px red;
  }
}

最终产品