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

Question

Estoy intentando codificar gráficos de Box y Bigotes en html. El problema es que tengo bordes alrededor de un div (como en el cuadro), pero estos bordes desaparecen al superponer la capa anterior, que contiene una imagen de color con bandas. La preferencia es no usar una imagen de fondo (o colores) aquí si puedo evitarlo.

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;
}

Tenga en cuenta el margen superior de -250px en el CSS para div.graphBoxes. A medida que disminuya, verá que los bordes alrededor del Cuadro aparecen a medida que se asoman desde la capa anterior.

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

Answer 1

No puede superponer un elemento sin tener posicionamiento.

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

Answer 2

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

* { margin: 0; padding: 0; }

a la parte superior de su hoja de estilo. 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 elementos que no tienen propiedad de posición en la hoja de estilo.

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

Answer 3

A veces sucede que el div no tiene indicación en el archivo css, por lo que establece automáticamente el borde o el relleno en algún valor de pix. Si especificas la etiqueta img en css puedes deshacerte de esta molesta configuración. Estoy totalmente de acuerdo con la posición de respuesta. Debe configurar cualquier div u otro selector que cree como relativ, static, absolute, etc. Por supuesto, se puede encontrar una explicación exhaustiva de la propiedad de posición en la escuela CSS W3C.

¡Espero que esto pueda dar más ayuda!

Answer 4

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 en la parte superior a 9999 y luego cambia la capa debajo del índice z a -100, debería Trabajar como se esperaba.