top - Flor paradoja CSS z-index
z-index position relative (6)
Aquí está mi intento: http://jsfiddle.net/Kx2k5/1/
(probado con éxito en Fx27 , Ch33 , IE9 , Sf5.1.10 y 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);
}
Básicamente superpuse un :after seudoelemento sobre el primer círculo (con algunas propiedades heredadas), lo he recortado con la propiedad clip() , de modo que solo hago visible su sección inferior (donde el círculo #1 superpone al círculo #5 )
Para las propiedades de CSS que he usado aquí, este ejemplo debería funcionar incluso en IE8 ( box-sizing , clip() , inherit y pseudoelementos son compatibles)
Captura de pantalla del efecto resultante
Me gustaría crear un efecto paradójico a través de la propiedad CSS z-index .
En mi código tengo cinco círculos, como en la imagen de abajo, y todos están absolutamente posicionados sin z-index definido. Por lo tanto, de forma predeterminada, cada círculo se superpone al anterior.
En este momento, el círculo 5 se superpone con el círculo 1 (imagen de la izquierda). La paradoja que me gustaría lograr es tener, al mismo tiempo, el círculo 1 debajo del círculo 2 y sobre el círculo 5 (como en la imagen de la derecha).
http://paradox.schramek.cz/1.jpg
Aquí está mi código
Margen:
<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 ejemplo en vivo también está disponible en http://jsfiddle.net/Kx2k5/ .
Probé muchas técnicas para apilar órdenes, apilar el contexto, etc. Leí algunos artículos sobre estas técnicas, pero no tuve éxito. ¿Como puedo resolver esto?
Aquí está mi ir en eso.
También uso un pseudo elemento posicionado en la parte superior del primer círculo, pero en lugar de utilizar el clip, mantengo el fondo transparente y le doy una sombra de cuadro que coincide con el color de fondo de los círculos (plateado) y el rojo borde para cubrir la parte inferior derecha del borde del círculo.
CSS (que es diferente del punto de partida)
.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;
}
}
Producto final
Mi intento también usando clip . La idea era tener la mitad y la mitad para el div . De esa manera, establecer z-index funcionaría.
De modo que puede establecer la parte superior en z-index: -1 y la parte inferior en z-index: 1 .
Salir:
.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>
Nota: Probado en IE 10+, FF 26 +, Chrome 33+ y Safari 5.1.7+.
Tristemente, la siguiente es solo una respuesta teórica, ya que por alguna razón no puedo obtener -webkit-transform-style: preserve-3d; para trabajar (tiene que estar cometiendo un error obvio, pero parece que no puede resolverlo). De cualquier manera, después de leer tu pregunta, como con cada paradoja, me pregunté por qué es solo una aparente imposibilidad, en lugar de una real. Unos segundos más tarde me doy cuenta de que en la vida real las hojas se rotan un poco, lo que permite que exista tal cosa. Entonces, quería inventar una demostración simple de la técnica, pero sin la propiedad anterior que es imposible (se dibuja en la capa primaria plana). De cualquier manera, aquí está el código base, sin embargo
<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>
Y el 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)
}
Y puedes encontrar el código completo aquí .
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;
}
Funciona en IE8 también.
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; }