¿Cómo forzar que los bordes CSS se muestren en una página en capas?

Estoy intentando codificar gráficos de Box y Whiskers en html. El problema es que tengo bordes alrededor de un div (como en el recuadro), pero estos bordes desaparecen al superponer la capa anterior, que contiene una imagen en color con bandas. La preferencia es no utilizar una imagen de fondo (o colores) aquí si puedo evitarlo.¿Cómo forzar que los bordes CSS se muestren en una página en capas?

El html es:


<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%"> 
<tr class="graphArea"> 
<td><div class="graphColors"><img src="ReadingColorScale.png" width="100%" height="250" alt="" /></div> 

<div class="graphBoxes"><img src="black.gif" width="2" height="50" alt="" class="Whisker" /><div class="graphBox"><img src="black.gif" width="100%" height="2" alt="" style="padding-top: 10px; padding-bottom: 10px;" /></div><img src="black.gif" width="2" height="50" alt="" class="Whisker" /></div></td> 
</tr> 
</table>

y el css es:



table#BoxAndWhiskers tr.graphArea td { 
    width: 33%; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes { 
    z-index: 1; 
    margin-top: -250px; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes img.Whisker { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

table#BoxAndWhiskers tr.graphArea td div.graphBoxes div.graphBox { 
    margin: 0; 
    padding: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
    border: 2px solid black; 
}

Nota al margen superior de -250px en el CSS para div.graphBoxes. A medida que disminuya, verá aparecer los bordes alrededor del cuadro a medida que se asoman desde la capa anterior.

¿Es posible mostrar los bordes en este caso? Gracias ...

Fuente

2009-05-07 mwiik

No se puede aplicar capas a un elemento sin tener un posicionamiento.

.graphBoxes { 
    position: relative; 
    z-index: 1; 
    margin-top: -250px; 
}

Fuente

2009-05-07 22:46:59

por cierto, hay otros problemas con este marcado/CSS, pero no sé lo suficiente sobre lo restringido que eres. –

con el 33% de ancho de celda; Eliminé otras 2 células idénticas del html. En cualquier caso, ¡esto lo solucionó! Es interesante que las imágenes de la línea negra se acodaron correctamente, pero la declaración de posición hizo que aparecieran los bordes div y el color de fondo. ¡¡¡Gracias!!! – mwiik

-1

Es difícil saber exactamente qué está pasando sin una imagen para ver, pero creo que si aumenta el índice z de la capa que desea arriba a 9999 y luego cambia la capa debajo de z-index a -100 debería funcionar como se esperaba.

Fuente

2009-05-07 19:07:39 jacobangel

El índice Z solo se aplica a los elementos posicionados (también conocido como propiedad de posición en CSS). –

Probablemente solo tenga que ajustar sus márgenes y sus almohadillas para que los bordes se vean de la manera que desee. Mi sugerencia es eliminar todo el relleno y el margen, y agregar

* { margin: 0; padding: 0; }

a la parte superior de la hoja de estilos. Luego ajuste todos los rellenos y márgenes, anchos y alturas para que se vea como se siente.

Tenga en cuenta que el índice Z no se aplica a los elementos que no tienen ninguna propiedad de posición en la hoja de estilo.

Una suposición humilde es que su margen negativo está causando los problemas.

Fuente

2009-05-07 20:37:52

¿Cómo forzar que los bordes CSS se muestren en una página en capas?

Respuesta

Cuestiones relacionadas