CSS z-index paradox flower

Question

I would like to create a paradoxical effect via the z-index CSS property.

In my code I have five circles, like in the image below, and they are all absolutely positioned with no defined z-index. Therefore, by default, every circle overlaps the previous one.

Right now, circle 5 overlaps circle 1 (left image). The paradox I'd like to achieve is to have, at the same time, circle 1 under the circle 2 and on top of circle 5 (as in the right image).

_{(source: schramek.cz)}

Here's my 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; }

A live example is also available at http://jsfiddle.net/Kx2k5/.

I tried a lot of techniques with stacking orders, stacking context and so on. I read some articles about these techniques, but no success. How can I solve this?

If it's just a coding challenge, maybe this belongs on codegolf? — TylerH, Mar 12 '14 at 13:14
I think the OP is looking for help. He means it to be a challenge for him to solve it. I think this is something many will learn from once done. I for one can find this technique useful. — LOTUSMS, Mar 12 '14 at 13:15
@1ubos. No jquery/JS whatsoever? It seems to me that it will need some logical use of IndexOf — LOTUSMS, Mar 12 '14 at 13:17
I think this can't be done with z-index alone. You might be luckier with :after pseudo elements, but I don't think this is allowed by the challange — Jonas Grumann, Mar 12 '14 at 13:18
this is not possible by using z-index. z-index is defining layers, its a sequence of integer numbers: -x, 0, x you can not have: x1 < x2 < x1 — gondo, Mar 12 '14 at 13:26
Please don't circumvent the quality filter with a fake code block. Either include the code in the question itself, or remove the fiddle link if it is not essential. Furthermore I would advise you to rephrase this into an actual problem with research rather than a **CHALLENGE** if you want your question to be taken seriously. — BoltClock, Mar 12 '14 at 15:08
I've reformatted the question including the code of his fiddle. — Fabrizio Calderan, Mar 12 '14 at 16:42
@Fabrizio Calderan: Thanks! I tried your code and works great... — 1ubos, Mar 13 '14 at 11:51
@1ubos You **really** should accept answers for your questions. I see you are not online often. Hopefully you see this. — rlemon, May 08 '14 at 12:42
[This css-tricks article](https://css-tricks.com/solving-last-item-problem-circular-distribution-partially-overlapping-items/) deals with this exact issue — Danield, Jul 02 '17 at 10:58

Fabrizio Calderan · Accepted Answer · 2015-03-18T08:47:07.160

Here's my attempt: http://jsfiddle.net/Kx2k5/1/
(successfully tested on Fx27, Ch33, IE9, Sf5.1.10 and 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);
}

Basically I've overlapped an :after pseudoelement over the first circle (with some properties inherited), then I've clipped it with clip() property, so I only make its bottom section visible (where circle #1 overlaps the circle #5).

For the CSS properties I've used here, this example should be working even on IE8 (box-sizing, clip(), inherit, and pseudoelements are supported there)

Screenshot of resulting effect

enter image description here

Not only I've learned some CSS today, but also brushed up my italian a bit :D thanks — Natan Streppel, Mar 12 '14 at 20:52

Ruddy · Answer 2 · 2015-07-08T07:30:25.790

My attempt also using clip. The idea was to have half and half for the div. That way setting z-index would work.

So you can set the top part to z-index: -1 and the bottom to z-index: 1.

Outcome:

enter image description here

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

Note: Tested on IE 10+, FF 26+,Chrome 33+ and Safari 5.1.7+.

any ideas with this question : http://stackoverflow.com/questions/22377416/how-to-warp-image#22377416 — NoobEditor, Mar 13 '14 at 12:09

score 18 · Answer 3 · edited Mar 14 '14 at 15:06

Here's my go at it.

I also use a pseudo element positioned on top of the first circle, but rather than using clip, I keep its background transparent and just give it an inset box-shadow that matches the background color of the circles (silver) as well as a red border to cover the bottom right sides of the circle's border.

Demo

CSS (that is different from starting point)

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

Final product enter image description here

Nice answer! The only issue I can think is box-shadows are not supported by IE 8 and below. Pseudo-elements are not supported by IE 7 and below anyway :) — The Pragmatick, Mar 02 '15 at 06:09

David Mulder · Answer 4 · 2014-03-13T12:50:50.580

Sadly the following is just a theoretical answer, as for some reason I can't get -webkit-transform-style: preserve-3d; to work (have to be making some obvious mistake, but can't seem to figure it out). Either way, after reading your question I - as with every paradox - wondered why it's only an apparent impossibility, rather than a real one. Another few seconds me realize that in real life the leaves are rotated a bit, thus allowing such a thing to exist. So then I wanted to concoct a simple demonstration of the technique, but without the previous property that's impossible (it gets drawn to the flat parent layer). Either way, here is the base code none the less

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

And the 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)
}

And you can find the full code here.

Works for me in Safari 7.0.2; maybe it's your browser? --_EDIT_-- mehehe, the preserve-3d is indeed not working. Reasonable 3D anyway, though :) — tomsmeding, Mar 14 '14 at 07:22

score 2 · Answer 5 · edited May 27 '14 at 12:35

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

You could have shortened your code a little bit by removing redundant things in `item2` and `item3`. And also moved the `position: absolute` in `.ix` and `#five` into `item`, `item2` and `item3` — webprogrammer, Mar 13 '14 at 08:42

score 0 · Answer 6 · answered Sep 24 '14 at 16:13

JS Fiddle LIVE DEMO

Works on IE8 too.

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

CSS z-index paradox flower

6 Answers6

Outcome:

Linked