Caja de CSS / superposición de sombra, índice z

Por favor, eche un vistazo al fragmento de código: http://codepen.io/anon/pen/JItLa

Intento mostrar 2 filas de bloques con diferentes cantidades de elementos en una fila. El evento de desplazamiento debe revelar la sombra CSS, pero hay un problema: el borde derecho de la sombra se superpone con el siguiente bloque. Diría que la posible solución aquí es usar display: inline-block, que deja los huecos entre los bloques, pero no necesito los huecos. Los bloques deben permanecer pegajosos entre sí, pero la sombra correcta debe superponerse al siguiente locking de tope.

html, body { margin: 0; padding: 0 } .wrapper { width: 100%; margin-top: 20px } .tile, .tile2 { float: left; background: #f2f2f2 } .tile { width: 25% } .tile2 { width: 33.3%; border-left: 1px solid #ddd } .tile:hover, .tile2:hover { -webkit-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000; -moz-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000; box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000 } .header { padding: 20px 0px 10px; text-align: center } .clear { clear: both } 
 
some text
some text
some text
some text
some text
some text
some text

¿Cómo es eso posible?

Aquí hay otro problema: cuando agrego el borde entre los bloques, los últimos bloques se mueven a la siguiente línea que no está bien. Vea la 2da fila en el ejemplo dado arriba.

Agregue un z-index al elemento en vuelo estacionario.

Además, el elemento también debe colocarse para que funcione la propiedad del z-index Z. Por lo tanto, agregue position:relative también.

9.9.1 Especificación del nivel de stack: la propiedad ‘z-index’

z-index: Se aplica a: elementos posicionados

Cada caja tiene una posición en tres dimensiones. Además de sus posiciones horizontales y verticales, las cajas se encuentran a lo largo de un “eje z” y están formateadas una encima de la otra. Las posiciones del eje Z son particularmente relevantes cuando las cajas se superponen visualmente. Esta sección explica cómo se pueden ubicar las cajas a lo largo del eje z.

Codepen actualizado : funciona ahora.

 .tile:hover, .tile2:hover { z-index: 1; position: relative; } 

Para abordar su segundo problema, los elementos aparecen en una nueva línea porque sus anchos no sumn, ya que está 1px apagado debido al borde.

33.3% + 33.3% + 33.3% + 1px ! = 100%

Tienes algunas opciones diferentes:

  • Usa calc() para restar 1px del ancho- width: calc(33.3% - 1px)

  • Cambie el modelo de caja para incluir el borde en el cálculo del ancho del elemento: box-sizing

Si opta por utilizar box-sizing , necesita vendedores adecuados si desea soporte en todos los navegadores. Yo usaría algo como:

 .tile2 { width: 33.3%; border-left: 1px solid #ddd; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } 

Codepen actualizado usando box-sizing .

Agregue el siguiente CSS, si no necesita el espacio entre los divs.

 .wrapper { text-align: center; font-size: 0px; } .tile, .tile2 { display: inline-block; } .tile:hover, .tile2:hover { z-index: 1; position: relative; } .header { font-size: 12px; } `