CSS z-endeksi paradoks çiçeği

z-index CSS özelliği aracılığıyla paradoksal bir etki yaratmak istiyorum .

Kodumda, aşağıdaki resimde olduğu gibi beş dairem var ve hepsi tanımsız olarak kesinlikle konumlandırılmış z-index. Bu nedenle, varsayılan olarak her daire bir öncekiyle çakışır.

Şu anda, 5. daire, 1. daire ile örtüşüyor (soldaki resim). Elde etmek istediğim paradoks, aynı zamanda, 1. daireyi 2. çemberin altında ve 5. çemberin üstünde (sağdaki resimde olduğu gibi) daire içine almaktır.

_{(kaynak: schramek.cz )}

İşte kodum

İşaretleme:

<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; }

Canlı bir örnek de http://jsfiddle.net/Kx2k5/ adresinde mevcuttur .

İstifleme siparişleri, içerik istifleme vb. İle birçok teknik denedim. Bu teknikler hakkında bazı makaleler okudum ama başarılı olamadım. Bunu Nasıl Çözebilirim?

İşte benim girişimi var: http://jsfiddle.net/Kx2k5/1/
(başarıyla test Fx27, Ch33, IE9, Sf5.1.10ve 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);
}

Temel olarak :after, ilk dairenin üzerine bir sahte eleman üst üste bindim (bazı özelliklerin miras alındığı), sonra onu clip()özellik ile kırptım , bu yüzden sadece alt kısmını görünür kılıyorum (dairenin daire ile #1örtüştüğü yerde #5).

Burada kullandığım CSS özellikleri için, bu örnek IE8 üzerinde bile çalışmaya olmalıdır ( box-sizing, clip(), inherit, ve pseudoelements orada desteklenmektedir)

Ortaya çıkan etkinin ekran görüntüsü

Benim denemem de kullanıyor clip. Fikir, için yarı yarıya sahip olmaktı div. Bu şekilde ayar z-indexişe yarar.

Böylece üst kısmı z-index: -1ve alt kısmı olarak ayarlayabilirsiniz z-index: 1.

Sonuç:

.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>

BURADAN DEMO

Not: IE 10+, FF 26 +, Chrome 33+ ve Safari 5.1.7+ üzerinde test edilmiştir.

İşte benim gidişatım.

Ayrıca ilk dairenin üstüne yerleştirilmiş sözde bir öğe de kullanıyorum, ancak klibi kullanmak yerine arka planını şeffaf tutuyorum ve ona dairelerin arka plan rengiyle (gümüş) ve kırmızı ile eşleşen bir ek kutu gölgesi veriyorum. çemberin kenarlığının sağ alt taraflarını kaplamak için kenarlık.

Demo

CSS (başlangıç ​​noktasından farklıdır)

.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;
  }
}

Son ürün

Ne yazık ki aşağıdakiler sadece teorik bir cevap, çünkü bazı nedenlerden dolayı -webkit-transform-style: preserve-3d;işe koyulamıyorum (bariz bir hata yapmam gerekiyor, ama çözemiyorum). Her iki durumda da, sorunuzu okuduktan sonra - her paradoksta olduğu gibi - bunun neden gerçek değil de sadece görünen bir imkansızlık olduğunu merak ettim. Birkaç saniye daha, gerçek hayatta yaprakların biraz döndürüldüğünü, böylece böyle bir şeyin var olmasına izin verdiğini fark ettim. Bu yüzden tekniğin basit bir gösterimini yapmak istedim, ancak önceki özellik olmadan bu imkansızdır (düz ana katmana çekilir). Her iki durumda da, işte temel kod daha az değil

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

Ve css:

.i1 {
    -webkit-transform:rotateZ(288deg)
}
.i2 {
    -webkit-transform:rotateZ(0deg)
}
.i3 {
    -webkit-transform:rotateZ(72deg)
}
.i4 {
    -webkit-transform:rotateZ(144deg)
}
.i5 {
    -webkit-transform:rotateZ(216deg)
}
.leaf { 
    position:absolute;
    left:35px;
    top:35px;
}
.leaf > .item {
    -webkit-transform:rotateY(30deg) translateY(35px)
}

Ve tam kodu burada bulabilirsiniz .

JS Fiddle

HTML

<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 id="five">5</div>
<div class="item2 i5"></div>
<div class="item3 i6"></div>

CSS

.item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    background: silver;
    border-radius: 50%;
    text-align: center;
}
.item2 {
      width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-right: none;
    border-radius: 50px 0 0 50px;
    background: silver 50%;
    background-size: 25px;
    text-align: center;   
        z-index: -3;
}
.item3 {
    width: 25px;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    border-left: none;
    border-radius: 0 50px 50px 0;
    background: silver 50%;
    background-size: 25px;
    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: 55px;
}
.i5 {
    position: absolute;
    top: 70px;
    left: 15px;
}
.i5 {
    position: absolute;
    top: 72px;
    left:19px;

}
.i6 {
    position: absolute;
    top: 72px;
    left: 44px;
}
#five {
     position: absolute;
    top: 88px;
    left: 40px;
    z-index: 100;
}

JS Fiddle CANLI DEMO

IE8'de de çalışıyor.

HTML

<div class="half under"><div class="item i1">1</div></div>
<div class="half above"><div class="item i1">1</div></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;
}
.half {
    position: absolute;
    overflow: hidden;
    width: 52px;
    height: 26px;
    line-height: 52px;
    text-align: center;
}
.half.under {
    top: 30px; 
    left: 0px;
    z-index: -1;
    border-radius: 90px 90px 0 0;
}
.half.above {
    top: 55px;
    left: 0px;
    z-index: 1;
    border-radius: 0 0 90px 90px;
}
.half.above .i1 { margin-top:-50%; }
.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; }