Vorrei creare un effetto paradossale tramite la proprietà z-index
CSS .
Nel mio codice ho cinque cerchi, come nell'immagine qui sotto, e sono tutti posizionati in modo assoluto e non definiti z-index
. Pertanto, per impostazione predefinita, ogni cerchio si sovrappone a quello precedente.
In questo momento, il cerchio 5 si sovrappone al cerchio 1 (immagine a sinistra). Il paradosso che vorrei ottenere è quello di avere, contemporaneamente, il cerchio 1 sotto il cerchio 2 e sopra il cerchio 5 (come nell'immagine a destra).
(fonte: schramek.cz )
Ecco il mio codice
Markup:
<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; }
Un esempio dal vivo è disponibile anche su http://jsfiddle.net/Kx2k5/ .
Ho provato molte tecniche con lo stacking degli ordini, lo stacking context e così via. Ho letto alcuni articoli su queste tecniche, ma senza successo. Come posso risolvere questo?