Fiore di paradosso z-index CSS


98

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?


10
Se è solo una sfida di codifica, forse questo appartiene a codegolf?
TylerH

12
Penso che l'OP stia cercando aiuto. Vuole essere una sfida per lui risolverlo. Penso che questo sia qualcosa da cui molti impareranno una volta fatto. Io per primo posso trovare utile questa tecnica.
LOTUSMS

@ 1ubos. Nessun jquery / JS di sorta? Mi sembra che occorrerà un uso logico di IndexOf
LOTUSMS

5
questo non è possibile utilizzando z-index. z-index definisce i livelli, è una sequenza di numeri interi: -x, 0, x non puoi avere: x1 <x2 <x1
gondo

4
Si prega di non aggirare il filtro di qualità con un blocco di codice falso. Includere il codice nella domanda stessa o rimuovere il collegamento a violino se non è essenziale. Inoltre ti consiglierei di riformulare questo in un problema reale con la ricerca piuttosto che in una SFIDA se vuoi che la tua domanda venga presa sul serio.
BoltClock

Risposte:


91

Ecco il mio tentativo: http://jsfiddle.net/Kx2k5/1/
(testato con successo su Fx27, Ch33, IE9, Sf5.1.10e 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);
}

Fondamentalmente ho sovrapposto uno :afterpseudoelemento al primo cerchio (con alcune proprietà ereditate), quindi l'ho ritagliato con clip()proprietà, quindi rendo visibile solo la sua sezione inferiore (dove il cerchio si #1sovrappone al cerchio #5).

Per le proprietà CSS che ho usato qui, questo esempio dovrebbe essere a lavorare anche su IE8 ( box-sizing, clip(), inherit, e pseudoelements sono supportati lì)


Screenshot dell'effetto risultante

inserisci qui la descrizione dell'immagine


2
Sembra che io sia arrivato alla festa troppo tardi! Buon lavoro! : P
Ruddy

2
Non solo ho imparato un po 'di CSS oggi, ma ho anche
rispolverato

29

Il mio tentativo anche usando clip. L'idea era di avere metà e metà per il div. In questo modo l'impostazione z-indexfunzionerebbe.

Quindi puoi impostare la parte superiore su z-index: -1e quella inferiore su z-index: 1.

Risultato:

inserisci qui la descrizione dell'immagine

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

DEMO QUI

Nota: testato su IE 10+, FF 26+, Chrome 33+ e Safari 5.1.7+.



18

Ecco il mio tentativo.

Uso anche uno pseudo elemento posizionato sopra il primo cerchio, ma invece di usare la clip, mantengo lo sfondo trasparente e gli do solo un'ombra a riquadro che corrisponde al colore di sfondo dei cerchi (argento) e un rosso bordo per coprire i lati in basso a destra del bordo del cerchio.

Demo

CSS (che è diverso dal punto di partenza)

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

Prodotto finale inserisci qui la descrizione dell'immagine


Bella risposta! L'unico problema che posso pensare è che le ombre dei riquadri non sono supportate da IE 8 e versioni precedenti. Gli pseudo-elementi non sono comunque supportati da IE 7 e versioni precedenti :)
The Pragmatick

4

Purtroppo la seguente è solo una risposta teorica, poiché per qualche motivo non riesco a mettermi -webkit-transform-style: preserve-3d;al lavoro (devo commettere un errore evidente, ma non riesco a capirlo). Ad ogni modo, dopo aver letto la tua domanda, come con ogni paradosso, mi sono chiesto perché è solo un'impossibilità apparente, piuttosto che reale. Ancora pochi secondi mi accorgo che nella vita reale le foglie sono un po 'ruotate, permettendo così a una cosa del genere di esistere. Quindi ho voluto inventare una semplice dimostrazione della tecnica, ma senza la proprietà precedente è impossibile (viene attratta dal livello principale piatto). Ad ogni modo, ecco il codice di base comunque

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

E il 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)
}

E puoi trovare il codice completo qui .


Funziona per me in Safari 7.0.2; forse è il tuo browser? - EDIT - mehehe, il preserv-3d non funziona davvero. Ragionevole 3D comunque, però :)
tomsmeding

2

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

Avresti potuto accorciare un po 'il tuo codice rimuovendo le cose ridondanti in item2e item3. E anche spostato position: absolutein .ixe #fivein item, item2eitem3
webprogrammer

0

DEMO LIVE di JS Fiddle

Funziona anche su IE8.

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; }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.