CSS z-index ดอกไม้ paradox

ฉันต้องการสร้างเอฟเฟกต์ที่ขัดแย้งกันผ่านคุณสมบัติz-index CSS

z-indexในรหัสของฉันฉันมีห้าวงการเช่นในภาพด้านล่างและพวกเขาจะทุกตำแหน่งอย่างไม่มีกำหนด ดังนั้นโดยค่าเริ่มต้นวงกลมทุกวงจะซ้อนทับกับวงกลมก่อนหน้า

ตอนนี้วงกลม 5 ซ้อนทับวงกลม 1 (ภาพซ้าย) ความขัดแย้งที่ฉันต้องการบรรลุคือการมีในขณะเดียวกันวงกลม 1 ใต้วงกลม 2 และด้านบนของวงกลม 5 (ดังภาพด้านขวา)

_{(ที่มา: schramek.cz )}

นี่คือรหัสของฉัน

มาร์กอัป:

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

ตัวอย่างสดยังมีบริการที่http://jsfiddle.net/Kx2k5/

ฉันลองใช้เทคนิคมากมายกับคำสั่งแบบเรียงซ้อนบริบทการเรียงซ้อนและอื่น ๆ ฉันอ่านบทความเกี่ยวกับเทคนิคเหล่านี้ แต่ไม่ประสบความสำเร็จ ฉันจะแก้ปัญหานี้ได้อย่างไร?

นี่คือความพยายามของฉัน: http://jsfiddle.net/Kx2k5/1/
(ทดสอบประสบความสำเร็จในFx27, Ch33, IE9, Sf5.1.10และ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);
}

โดยทั่วไปฉันได้ซ้อนทับส่วน:afterเทียมในวงกลมแรก (โดยมีคุณสมบัติบางอย่างที่สืบทอดมา) จากนั้นฉันก็ตัดมันด้วยclip()คุณสมบัติดังนั้นฉันจึงทำให้ส่วนล่างของมันมองเห็นได้เท่านั้น (โดยที่วงกลม#1ซ้อนทับวงกลม#5)

สำหรับคุณสมบัติของ CSS ที่ผมเคยใช้ที่นี่เช่นนี้ควรจะทำงานแม้ใน IE8 ( box-sizing, clip(), inheritและ pseudoelements ได้รับการสนับสนุนที่นั่น)

ภาพหน้าจอของผลที่เกิดขึ้น

ความพยายามของฉันยังใช้clip. ความคิดคือการมีครึ่งและครึ่งสำหรับdiv. การตั้งค่าแบบz-indexนั้นจะได้ผล

เพื่อให้คุณสามารถตั้งค่าส่วนด้านบนเพื่อและด้านล่างไปz-index: -1z-index: 1

ผล:

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

สาธิตที่นี่

หมายเหตุ:ทดสอบบน IE 10+, FF 26 +, Chrome 33+ และ Safari 5.1.7+

นี่คือสิ่งที่ฉันไป

ฉันยังใช้องค์ประกอบหลอกที่วางอยู่ด้านบนของวงกลมแรก แต่แทนที่จะใช้คลิปฉันทำให้พื้นหลังโปร่งใสและให้เงากล่องที่ใส่เข้าไปซึ่งตรงกับสีพื้นหลังของวงกลม (สีเงิน) และสีแดง เส้นขอบครอบคลุมด้านขวาล่างของเส้นขอบของวงกลม

การสาธิต

CSS (ซึ่งแตกต่างจากจุดเริ่มต้น)

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

ผลิตภัณฑ์สุดท้าย

น่าเศร้าที่คำตอบต่อไปนี้เป็นเพียงคำตอบทางทฤษฎีด้วยเหตุผลบางประการที่ทำให้ฉัน-webkit-transform-style: preserve-3d;ไปทำงานไม่ได้(ต้องทำผิดพลาดอย่างเห็นได้ชัด แต่ดูเหมือนจะคิดไม่ออก) ไม่ว่าจะด้วยวิธีใดก็ตามหลังจากอ่านคำถามของคุณฉัน - เช่นเดียวกับทุกความขัดแย้ง - สงสัยว่าทำไมจึงเป็นเพียงความเป็นไปไม่ได้ที่ชัดเจนแทนที่จะเป็นเรื่องจริง อีกไม่กี่วินาทีฉันก็รู้ว่าในชีวิตจริงใบไม้หมุนไปเล็กน้อยจึงปล่อยให้สิ่งนั้นมีอยู่จริง ดังนั้นฉันจึงต้องการสาธิตเทคนิคง่ายๆ แต่ถ้าไม่มีคุณสมบัติก่อนหน้านี้เป็นไปไม่ได้ (มันถูกดึงไปที่เลเยอร์พาเรนต์แบบแบน) ไม่ว่าจะด้วยวิธีใดนี่คือรหัสฐานไม่มีเลยแม้แต่น้อย

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

และ 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)
}

และคุณสามารถหารหัสเต็มได้ที่นี่

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 สาธิต

ทำงานบน 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; }