Come forzare i bordi css da visualizzare sulla pagina a più livelli?

Sto tentando di codificare i grafici Box e Whiskers in html. Il problema è che ho bordi attorno a un div (come in, the Box), ma questi bordi scompaiono quando si sovrappone al livello precedente, che contiene un'immagine a colori con bande. La preferenza non è usare un'immagine di sfondo (o colori) qui se posso evitarlo.Come forzare i bordi css da visualizzare sulla pagina a più livelli?

L'html è:


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

e css è:



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 margine-top -250px nel css div.graphBoxes. Dato che questo è diminuito, vedrai i bordi attorno al Box apparire mentre sbirciano dal livello precedente.

È possibile mostrare i bordi in questo caso? Grazie ...

fonte

2009-05-07 mwiik

Non è possibile sovrapporre un elemento senza averlo posizionato.

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

fonte

2009-05-07 22:46:59

btw - ci sono altri problemi con questo markup/css, ma non ne so abbastanza di quanto sei sobrio. –

re la larghezza della cella del 33%; Ho rimosso altre 2 celle identiche dall'html. In ogni caso, questo è stato risolto! È interessante notare come le immagini della linea nera siano state sovrapposte correttamente, ma la dichiarazione di posizione ha fatto apparire i bordi div e il colore di sfondo. Grazie!!! – mwiik

-1

È difficile dire esattamente cosa sta succedendo senza un'immagine da vedere, ma penso che se aumenti lo z-index del livello che vuoi sopra a 9999 e poi cambi il livello sotto lo z-index a -100 dovrebbe funzionare come previsto.

fonte

2009-05-07 19:07:39 jacobangel

Z-index si applica solo agli elementi posizionati (ovvero posizione position in CSS). –

Probabilmente devi solo aggiustare i margini e le imbottiture per far sì che i bordi mostrino come vuoi. Il mio consiglio è di rimuovere tutto il padding e il margine e di aggiungere

* { margin: 0; padding: 0; }

nella parte superiore del foglio di stile. Quindi regola tutti i paddings e i margini, le larghezze e le altezze per farlo sembrare come ti senti.

Ricorda che z-index non si applica agli elementi che non hanno proprietà position nel foglio di stile.

Un'ipotesi è che il margine negativo sta causando i problemi.

fonte

2009-05-07 20:37:52

Come forzare i bordi css da visualizzare sulla pagina a più livelli?

risposta

Problemi correlati