Como forçar fronteiras CSS, para exibir na página em camadas?

Question

Eu estou tentando código da caixa e bigodes gráficos em html. A questão é, eu tenho bordas em torno de um div (como no, a caixa), mas essas fronteiras desaparecem quando sobrepondo a camada anterior, que contém uma imagem colorida em faixas. A preferência não está a utilizar uma imagem de fundo (ou cores) aqui se eu puder evitá-lo.

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

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

Observe o margin-top de -250px no css para div.graphBoxes. Como este é diminuída, você verá as bordas ao redor da caixa aparecer como eles espreitam para fora da camada anterior.

É possível mostrar as fronteiras neste caso? Graças ...

Answer 1

Não é possível estratificar um elemento sem ter posicionamento.

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

Answer 2

Você provavelmente só tem que ajustar as suas margens e guarnição para fazer as fronteiras mostrar a maneira que você quiser. Minha dica é para remover todos preenchimento e margem, e adicionar

* { margin: 0; padding: 0; }

para o topo da sua folha de estilo. Em seguida, ajuste todos os preenchimentos e margens, larguras e alturas para fazer parecer que você sente.

Tenha em mente que z-index não se aplica aos elementos que não tem nenhuma posição-propriedade na folha de estilo.

Um palpite humilde é que a sua margem negativa está causando os problemas.

Answer 3

Às vezes acontece que o div não tem indicação no arquivo css, por isso define automaticamente fronteira ou estofamento para algum valor pix. Se você especificar tag img em css você pode se livrar dessa configuração irritante. Eu concordo totalmente com a resposta posição. Você tem que definir qualquer div ou outro seletor que você cria como relativ, estático, absoluto, etc. Uma explicação exaustiva de propriedade de posição pode ser encontrada naturalmente em escola CSS W3C.

Espero que isso pode dar mais ajuda!

Answer 4

É difícil dizer exatamente o que está acontecendo sem uma imagem para ver, mas acho que se você aumentar o índice z da camada que você quer na parte superior para 9999 e altere a camada abaixo do z-index para -100 deveria trabalho como esperado.