Как заставить границы CSS отображаться на многослойной странице? - PullRequest
Новая
       23

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

6 голосов
/ 07 мая 2009

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

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>

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

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

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

Ответы [ 4 ]

6 голосов
/ 08 мая 2009

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

.graphBoxes {
    position: relative;
    z-index: 1;
    margin-top: -250px;
}
0 голосов
/ 21 июля 2018

Иногда случается, что у div нет индикации в файле css, поэтому он автоматически устанавливает границу или отступ в какое-то значение пикселя. Если вы укажете тег img в css, вы можете избавиться от этого раздражающего параметра. Я полностью согласен с позицией ответа. Вы должны установить любой div или другой созданный вами селектор как релятивный, статический, абсолютный и т. Д. Подробное объяснение свойства позиции можно найти, конечно, в школе CSS W3C.

Надеюсь, что это может помочь!

0 голосов
/ 08 мая 2009

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

* { margin: 0; padding: 0; }

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

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

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

0 голосов
/ 07 мая 2009

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

...