Si necesito #element-one a estar por encima de #element-two, #element-two para estar por encima de #element-three y #element-three para estar por encima de #element-one, ¿hay alguna manera de hacer esto con CSS? ¿Cualquier otra manera?¿Hay alguna manera de hacer un círculo z-index?
no sé algún método para hacer esto en el CSS o JavaScript ..
que se dividirían un elemento en dos partes, sin que ello ha dado cuenta de usuario. (En realidad esto no es posible en todos los casos, por ejemplo, con cuadros de texto, pero funciona bien con imágenes.)
Así #element-one-part-A está por encima de #element-two, #element-two está por encima de #element-three y #element-three está por encima de #element-one-part-B. Técnicamente no es un círculo z-index, pero parece.
Es imposible. z-index son como la capa de photoshop, el valor es juste la posición en la pila.
¿Puedes intentar hacer trampa con algún javascript?
ver este ejemplo con 4 elementos
<html>
<body>
<div id="container">
<div id="e1" class="common">
this is element 1
this is element 1
this is element 1
</div>
<div id="e2" class="common">
this is element 2
this is element 2
this is element 2
</div>
<div id="e3" class="common">
this is element 3
this is element 3
this is element 3
</div>
<div id="e4" class="common">
this is element 4
this is element 4
this is element 4
</div>
</div>
<style>
html { font-size: 3em;}
.common {
position: absolute;
overflow: hidden;
}
.clone {
color: red;
margin-top: -100%;
background-color: rgba(200, 0, 100, .5) !important;
}
.window {
overflow: hidden;
width: 50%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0,0,0, .2);
}
#container {
width: 600px;
height: 600px;
margin: auto;
background: #eee;
position: relative;
}
#e1 {
background: yellow;
color: orange;
width: 100px;
height: 500px;
top: 50px;
left: 100px;
}
#e2 {
background: lightblue;
color: blue;
width: 500px;
height: 100px;
top: 100px;
left: 50px;
}
#e3 {
background: red;
color: pink;
width: 100px;
height: 500px;
bottom: 50px;
right: 100px;
}
#e4 {
background: lightgreen;
color: green;
width: 500px;
height: 100px;
bottom: 100px;
right: 50px;
}
</style>
<script>
(function() {
var clone = document.getElementById('e1').cloneNode(true);
clone.className = 'common clone';
var view = document.createElement('div');
view.className = 'window';
view.appendChild(clone);
document.getElementById('container').appendChild(view);
})();
</script>
</body>
</html>
Eso es 'z-index' no' x-index' =) –
houps! rectificado ^^ –
Esta es una pregunta muy interesante. Sin embargo, soy básicamente la respuesta es no, el podría ser un truco que hace el truco un poco;) Muy interesado en ver una respuesta decente aquí. NOTA: en tu muestra tienes 3 elementos, ¿eso significaría que los elementos están rotados? y además: ¿qué versión de CSS quieres y está permitido javascript? –
No creo que esto se pueda hacer durante el período. Se requeriría un único elemento para tener múltiples valores de índice z. Una pregunta muy interesante, aunque creo que necesitarás simular el efecto ... ¿Estás preguntando teóricamente o tienes un requerimiento? Si este último podría usted enviar una versión burlada para su inspección? ¡Gracias! – lnrbob
CSS puede ser, a veces, bizantino, pero no creo que esté a la altura de los estándares de creación de un diseño de página [MC Escher] (http://en.wikipedia.org/wiki/M._C._Escher) como todavía. Ni siquiera con CSS 3. –