Плавающий элемент исчезает за фоном, когда контейнер имеет положение: относительное - PullRequest
Новая
       39

Плавающий элемент исчезает за фоном, когда контейнер имеет положение: относительное

0 голосов
/ 27 марта 2012

Я свел свою проблему к довольно простому отдельному файлу с CSS, включенным в тег <style>. Проблема в: У меня есть плавающая правая колонка с прозрачным фоном, чтобы показать текст и картинки. Это работает нормально, как и ожидалось.

Теперь я хочу расположить блок "Сайт, разработанный ...." чуть выше нижнего колонтитула.

Я хочу использовать для этого абсолютное позиционирование div, которое позиционируется относительно содержащего #content div, которое должно получить свойство position:relative для достижения этого.

Когда я устанавливаю это свойство, плавающий правый столбец исчезает и кажется скрытым за фоновым изображением блока #content.

Я не могу найти объяснение этому. Обходной путь должен был бы поместить его относительно нижнего колонтитула (в этом случае #footer div получит свойство position:relative).

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

Понятно, что в случае отсутствия относительного позиционирования текст располагается относительно браузера в нижнем левом углу.

http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html

http://websites.drsklaus.nl/relativeproblem/index_withrelative.html

1 Ответ

1 голос
/ 27 марта 2012

Вы были почти там!Вот небольшая помощь, чтобы закончить это.

#main {
    width: 1005px;
    margin: 20px auto; /* shorthand margin for x and y axis */
    border: solid black 1px;
    /* Added background to main instead so it still covers the full background */
    background-image: url('grey-repeating-background-4.jpg');
}

#content {
    position: relative;
    min-height: 500px;
    /* made the padding here margin, made it slightly bigger to accomedate the right column */
    margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}

Причина, по которой ваш правый столбец скрывается за содержимым, заключается в том, что перед тем, как поместить на него position:relative;, он находится в нормальном потоке, а не «позиционируется», и поэтому приоритет z-index на самом деле простоDOM заказ.Позиционирование просто сделало его намного более важным;затемнение правой колонки.

...