attribute - Efecto paradójico para HTML<div> s usando CSS

html title attribute

Question

Estoy atrapado aquí. Por favor ayuda. Quiero hacer lo siguiente a través de css.

Pero cuando uso el posicionamiento CSS, obtengo esta salida.

La cuarta capa (VERDE) debe ir debajo de la primera capa (AZUL) que no está sucediendo. Este es el código que he usado.

HTML:

<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div> 

CSS:

div{
height:100px;
width:100px; 
border:solid 1px;
}

.box1{
position:relative;
left:500px;
background-color:#00d8ff;
}

.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
}

.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
}

.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
}

JSFiddle: http://jsfiddle.net/rkubs/

Incluso traté de usar el índice Z. Pero no sirve de nada. Ayuadame. Gracias por adelantado.

Answer 1

DEMO DE TRABAJO: antes

senario

Usando solo un pseudo-elemento :before que solo tengas que configurar border-top y border-right entonces dale una posición absoluta en la parte inferior izquierda de div2

Con el mismo código HTML que OP, todo lo que necesita es un Pseudo-element :before o :after combinar z-index . Para que sea más fácil pongo números en tu HTML.

Nota: debe establecer la posición en relación con el elemento con el pseudo , establecer el borde superior y el borde derecho que puede eliminar usando box-shadow también vea WORKING DEMO WITH BOX-SHADOW .

HTML

<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div> 

CSS

div{
height:100px;
width:100px; 
border:solid 1px;
}

.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}

.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '''';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;    
}

.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}

DEMO DE TRABAJO CON BOX-SHADOW

Aquí solo necesitas cambiar el width y height de .box2 .

senario

elige un div en mi caso div2 , no establece el color de fondo y luego restablece los bordes border:none; .

Ya que ha establecido div ancho, altura y posición relativa, ahora puede configurar :before y ''después'' ancho a 100% de ancho y 50% de alto, uno en la parte superior y el otro en la parte inferior, luego para :before establecer el border-top y para :after establecer el border-bottom .

Ahora se establece para ambos, entonces, border-left y border-right .

div{
height:100px;
width:100px; 
border:solid 1px;
position:relative;
}

.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}

.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '''';
position: absolute;   
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;    
}

.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}

DEMO DE TRABAJO: ANTES: DESPUÉS DE FLEXIBLE

Answer 2

¿Qué tal algo como esto?

<div class="box2">
<div class="box-top"></div> 
<div class="box-bot"></div>
</div>

## css ##

.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}

.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}

.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}

http://jsfiddle.net/a8fXP/30/

Answer 3

Divida el cuadro izquierdo en dos secciones, la sección superior e inferior, y asigne los índices z en consecuencia.

Answer 4

No estoy seguro de que puedas hacer eso de manera normal, un pequeño truco puede ser de ayuda.

Lo que hago es agregar otro cuadro justo debajo de .box1 con z-index arriba de todos, y con un tamaño del 50% del padre.

HTML:

<div class="box1">
    <div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div> 

CSS:

.box1-fake{
    background-color:#00d8ff;
    position:absolute;
    left: -1px;
    top: -1px;
    z-index: 1000;
    width: 50%;
    border-right: 0 none;
}

Answer 5

Puede usar un clip en un pseudo elemento después del primer cuadro para que esto funcione:

.box1:after {
    content: "";
    border:solid 1px;
    background: #00d8ff;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: -1px;
    left: -1px;
    clip: rect(76px 32px 102px -1px);
}

FIDDLE

Para obtener más información sobre la propiedad del clip css, vea esta página de Mozilla.

También tiene soporte para múltiples navegadores.