Je voudrais créer un effet paradoxal via la propriété z-index
CSS .
Dans mon code, j'ai cinq cercles, comme dans l'image ci-dessous, et ils sont tous positionnés de manière absolue sans définition z-index
. Par conséquent, par défaut, chaque cercle chevauche le précédent.
À l'heure actuelle, le cercle 5 chevauche le cercle 1 (image de gauche). Le paradoxe que j'aimerais réaliser est d'avoir, en même temps, le cercle 1 sous le cercle 2 et au-dessus du cercle 5 (comme sur l'image de droite).
(source: schramek.cz )
Voici mon code
Balisage:
<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 exemple en direct est également disponible sur http://jsfiddle.net/Kx2k5/ .
J'ai essayé beaucoup de techniques avec l'empilement des commandes, l'empilement du contexte, etc. J'ai lu quelques articles sur ces techniques, mais sans succès. Comment puis-je resoudre ceci?