Как заставить границы css отображать на многоуровневой странице?

Я пытаюсь кодировать графы Box и Whiskers в html. Проблема в том, что у меня есть границы вокруг div (как в, в ящике), но эти границы исчезают при наложении предыдущего слоя, который содержит полосатое цветное изображение. Предпочтение - не использовать фоновое изображение (или цвета) здесь, если я могу его избежать.Как заставить границы css отображать на многоуровневой странице?

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>

и КСС:



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

Примечание запас-верх -250px в CSS для div.graphBoxes. Поскольку это уменьшено, вы увидите границы вокруг окна, когда они заглядывают из предыдущего слоя.

Можно ли показывать границы в этом случае? Спасибо ...

источник

2009-05-07 mwiik

Вы не можете сложить элемент без позиционирования.

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

источник

2009-05-07 22:46:59

btw - есть другие проблемы с этой разметкой/css, но я не знаю достаточно о том, насколько вы сдержанны. –

re - ширина ячейки 33%; Я удалил 2 других идентичных ячейки из html. В любом случае это фиксировало это! Интересно, что изображения черной линии накладываются правильно, но в объявлении позиции появляются границы div и цвет фона. Благодаря!!! – mwiik

-1

Трудно точно сказать, что происходит без изображения, но я думаю, что если вы увеличите z-индекс слоя, который хотите на вершине до 9999, а затем измените z-index слоя ниже. до -100 он должен работать должным образом.

источник

2009-05-07 19:07:39 jacobangel

Z-index применяется только к позиционированным элементам (aka position-property в CSS). –

Возможно, вам просто нужно настроить свои поля и прокладки, чтобы границы отображались так, как вы хотите. Мой совет должен удалить все отступы и разметку и добавить

* { margin: 0; padding: 0; }

наверху вашей таблицы стилей. Затем отрегулируйте все прокладки и поля, ширину и высоту, чтобы они выглядели так, как вы себя чувствуете.

Имейте в виду, что z-индекс не применяется к элементам, которые не имеют свойства position в таблице стилей.

Смиренное предположение, что ваш отрицательный запас вызывает проблемы.

источник

2009-05-07 20:37:52

Как заставить границы css отображать на многоуровневой странице?

ответ

Смежные вопросы