Почему мой абсолютный div скрывает мой относительный div? - PullRequest
Новая
       1

Почему мой абсолютный div скрывает мой относительный div?

2 голосов
/ 15 ноября 2011

У меня есть заголовок типа ленты в верхней части моего сайта: 

#top-wrapper {
    border-bottom: 5px solid #A1C1BE;
    width: 100%;
    background-color: #59554E;
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 100px;
    padding: 10px 0 0 0;
    color: #C0C0A8;
}

Абсолютное позиционирование необходимо, чтобы убедиться, что оно занимает всю ширину браузера пользователя (насколько я знаю). Однако остальная часть моей веб-страницы (основная часть, которая содержит все мои другие элементы div) скрыта за этой лентой: 

#pagebody {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

Единственное решение, которое мне удалось найти, - это добавить группу <br> между концом top-wrapper и началом pagebody.

Есть ли лучший способ сделать это?

Ответы [ 4 ]

2 голосов
/ 15 ноября 2011

Согласно моему комментарию в другом ответе:

Вы можете просто использовать width: 100%, но убедитесь, что вы удалили пробел по умолчанию, с которым он оставляет: 

html, body {
    margin: 0;
    padding: 0;
}

Вы также должны проверить necolas ' normalize.css . Он включает в себя все эти основные правила CSS, которые вам понадобятся практически на каждом сайте:)

2 голосов
/ 15 ноября 2011

Абсолютно позиционированные элементы (top-wrapper) всегда располагаются поверх относительных элементов (pagebody), если только вы не делаете хакерские вещи с z-index (и даже это ограничено)То, что вы, вероятно, хотите сделать, это переместить элемент pagebody вниз за верхнюю обертку.Я не знаю, какова ваша верхняя обертка, потому что она не имеет указанной высоты.И вы можете не знать об этом из-за разницы в размерах шрифта.Но в целом, вам просто нужно добавить верхнее поле или отступ к тегу pagebody, примерно так: 

margin-top:50px;
0 голосов
/ 15 ноября 2011

Есть много способов сделать это.Во-первых, вы можете поместить верхнюю обертку за пределы элемента pagebody, а затем просто определить ее ширину как 100%.

Если у вас есть изображение, которое представляет собой ленту и предполагается, что оно перекрывает верхнюю часть элемента pagebody -как я думаю, вы говорите выше - тогда вы бы использовали абсолютное положение и z-index, чтобы разместить его над элементом bodybody.Затем добавьте правильную верхнюю часть отступа к телу страницы.

Вы не предоставили html, поэтому мы на самом деле не знаем, что вы делаете.

0 голосов
/ 15 ноября 2011

Абсолютное позиционирование выводит элемент из нормального потока. Вам не нужно абсолютное позиционирование, чтобы максимизировать ширину. Вы делаете это с шириной: 100%.

...