z-index CSS bu özelliği ile paradoksal bir etki oluşturmak istiyorum.

Benim kod beş daire gibi resimde var ve Kesinlikle hayır z-index tanımlanan yer alıyor. Bu nedenle, varsayılan olarak, her daire önceki çakışıyor.

Şu anda, Daire 5 Daire 1 örtüşmektedir (resim solda). Ulaşmak istiyorum paradoksu, aynı zamanda, dairenin altında 2 Daire 1 ve daire 5 üst (sağ resim).

İşte benim kod

İş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 http://jsfiddle.net/Kx2k5/ de mevcuttur.

İstifleme siparişleri bir sürü teknik, içerik ve istifleme çalıştım. Bu teknikler, ama hiçbir başarı hakkında bazı makaleler okudum. Bunu nasıl çözebilirim?

Burada benim girişimi: http://jsfiddle.net/Kx2k5/1/
(başarıylaFx27, , *, *10Ch33IE9 ve Op19 test edildi)

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

Temelde ettim çakışan bir :after pseudoelement üzerinde ilk çember (bazı özelliklerini miras), o zaman ben de onları kestim clip() özellik, bu yüzden ben sadece onun alt bölümünde görünür (burada Daire #1 çakışıyor Daire #5).

Burada kullandığım CSS özellikleri için, bu örnek bile IE8 (, *, inherit, *clip()17 ve pseudoelements orada desteklenir) üzerinde çalışıyor olması gerekir

Ekran görüntüsü etkisi sonucu