CSS z-index hoa nghịch lý

Tôi muốn tạo một hiệu ứng nghịch lý thông qua thuộc tính z-index CSS .

Trong mã của tôi, tôi có năm vòng tròn, giống như trong hình dưới đây, và tất cả chúng đều được định vị tuyệt đối không xác định z-index. Do đó, theo mặc định, mọi vòng tròn đều chồng lên vòng tròn trước đó.

Ngay bây giờ, hình tròn 5 chồng lên hình tròn 1 (hình bên trái). Nghịch lý mà tôi muốn đạt được là đồng thời có vòng tròn 1 bên dưới vòng tròn 2 và trên đầu vòng tròn 5 (như trong hình bên phải).

_{(nguồn: schramek.cz )}

Đây là mã của tôi

Đánh dấu:

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

Một ví dụ trực tiếp cũng có sẵn tại http://jsfiddle.net/Kx2k5/ .

Tôi đã thử rất nhiều kỹ thuật với thứ tự xếp chồng, bối cảnh xếp chồng, v.v. Tôi đọc một số bài báo về những kỹ thuật này, nhưng không thành công. Làm sao tôi có thể giải quyết việc này?

Đây là nỗ lực của tôi: http://jsfiddle.net/Kx2k5/1/
(thử nghiệm thành công trên Fx27, Ch33, IE9, Sf5.1.10và 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);
}

Về cơ bản, tôi đã chồng một phần tử :aftergiả lên vòng tròn đầu tiên (với một số thuộc tính được kế thừa), sau đó tôi đã cắt nó bằng thuộc clip()tính, vì vậy tôi chỉ hiển thị phần dưới cùng của nó (nơi vòng tròn #1chồng lên vòng tròn #5).

Đối với các thuộc tính CSS Tôi đã sử dụng ở đây, ví dụ này nên làm việc ngay cả trên IE8 ( box-sizing, clip(), inherit, và pseudoelements được hỗ trợ có)

Ảnh chụp màn hình của hiệu ứng kết quả

Cố gắng của tôi cũng sử dụng clip. Ý tưởng là có một nửa và một nửa cho div. Theo cách đó cài đặt z-indexsẽ hoạt động.

Vì vậy, bạn có thể đặt phần trên cùng thành z-index: -1và dưới cùng thành z-index: 1.

Kết quả:

.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 TẠI ĐÂY

Ghi chú: Đã thử nghiệm trên IE 10+, FF 26 +, Chrome 33+ và Safari 5.1.7+.

Đây là cách của tôi.

Tôi cũng sử dụng một phần tử giả được đặt ở trên cùng của vòng tròn đầu tiên, nhưng thay vì sử dụng clip, tôi giữ cho nền của nó trong suốt và chỉ tạo cho nó một bóng hộp bên trong phù hợp với màu nền của các vòng tròn (bạc) cũng như màu đỏ viền để che các cạnh dưới cùng bên phải của đường viền hình tròn.

Bản giới thiệu

CSS (khác với điểm bắt đầu)

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

Sản phẩm cuối cùng

Đáng buồn thay, những điều sau đây chỉ là một câu trả lời lý thuyết, vì một số lý do mà tôi không thể bắt -webkit-transform-style: preserve-3d;đầu làm việc (chắc chắn phải mắc một sai lầm rõ ràng nào đó, nhưng dường như không thể tìm ra). Dù bằng cách nào, sau khi đọc câu hỏi của bạn, tôi - cũng như mọi nghịch lý - tự hỏi tại sao đó chỉ là điều không thể hiển nhiên, chứ không phải là thực tế. Một vài giây nữa tôi nhận ra rằng trong cuộc sống thực, những chiếc lá được xoay một chút, do đó cho phép một thứ như vậy tồn tại. Vì vậy, sau đó tôi muốn tạo ra một trình diễn đơn giản của kỹ thuật, nhưng không có thuộc tính trước đó thì điều đó là không thể (nó được vẽ vào lớp cha phẳng). Dù bằng cách nào, đây là mã cơ sở không hơn không kém

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

Và 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)
}

Và bạn có thể tìm thấy mã đầy đủ ở đây .

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

Hoạt động trên IE8 quá.

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