CSS Z-Index Paradox Blume

Ich möchte über die z-index CSS- Eigenschaft einen paradoxen Effekt erzeugen .

In meinem Code habe ich fünf Kreise, wie im Bild unten, und alle sind absolut ohne Definition positioniert z-index. Daher überlappt standardmäßig jeder Kreis den vorherigen.

Im Moment überlappt Kreis 5 Kreis 1 (linkes Bild). Das Paradoxon, das ich erreichen möchte, ist, gleichzeitig Kreis 1 unter dem Kreis 2 und über Kreis 5 zu haben (wie im rechten Bild).

_{(Quelle: schramek.cz )}

Hier ist mein Code

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

Ein Live-Beispiel finden Sie auch unter http://jsfiddle.net/Kx2k5/ .

Ich habe viele Techniken mit Stapelaufträgen, Stapelkontext usw. ausprobiert. Ich habe einige Artikel über diese Techniken gelesen, aber keinen Erfolg. Wie kann ich das lösen?

Hier ist mein Versuch: http://jsfiddle.net/Kx2k5/1/
(erfolgreich getestet auf Fx27, Ch33, IE9, Sf5.1.10und 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);
}

Grundsätzlich habe ich ein :afterPseudoelement über dem ersten Kreis überlappt (mit einigen geerbten Eigenschaften), dann habe ich es mit der clip()Eigenschaft abgeschnitten , sodass ich nur den unteren Bereich sichtbar mache (wobei der Kreis #1den Kreis überlappt #5).

Für die CSS - Eigenschaften ich hier verwendet habe, sollte dieses Beispiel auch auf IE8 arbeiten ( box-sizing, clip(), inherit, und Pseudoelemente werden dort unterstützt)

Screenshot des resultierenden Effekts

Mein Versuch auch mit clip. Die Idee war, halb und halb für die zu haben div. Auf diese Weise z-indexwürde die Einstellung funktionieren.

So können Sie den oberen Teil auf z-index: -1und den unteren Teil auf einstellen z-index: 1.

Ergebnis:

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

Hinweis: Getestet auf IE 10+, FF 26+, Chrome 33+ und Safari 5.1.7+.

Hier ist mein Versuch.

Ich verwende auch ein Pseudoelement, das über dem ersten Kreis positioniert ist, aber anstatt einen Clip zu verwenden, halte ich seinen Hintergrund transparent und gebe ihm nur einen eingefügten Kastenschatten, der der Hintergrundfarbe der Kreise (Silber) sowie einem Rot entspricht Rand, um die unteren rechten Seiten des Kreisrandes abzudecken.

Demo

CSS (das unterscheidet sich vom Ausgangspunkt)

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

Endprodukt

Leider ist das Folgende nur eine theoretische Antwort, da ich aus irgendeinem Grund nicht -webkit-transform-style: preserve-3d;zur Arbeit kommen kann (muss einen offensichtlichen Fehler machen, kann es aber nicht herausfinden). Wie auch immer, nachdem ich Ihre Frage gelesen hatte, fragte ich mich - wie bei jedem Paradoxon - warum es nur eine offensichtliche Unmöglichkeit ist und keine echte. Noch ein paar Sekunden merke ich, dass im wirklichen Leben die Blätter ein wenig gedreht sind, so dass so etwas existieren kann. Also wollte ich eine einfache Demonstration der Technik zusammenstellen, aber ohne die vorherige Eigenschaft ist das unmöglich (es wird auf die flache übergeordnete Ebene gezeichnet). In jedem Fall ist hier der Basiscode

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

Und die 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)
}

Den vollständigen Code finden Sie hier .

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

Funktioniert auch mit 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; }