Исправлена ​​ошибка позиционирования в CSS - PullRequest
Новая
       2

Исправлена ​​ошибка позиционирования в CSS

0 голосов
/ 08 февраля 2012 
<html>
    <body>
        <div class="fixed-top-bar" style="position:fixed"></div>
        <div class="content" style="position:static"></div>
    </body>
</html>

В моем браузере оба div начинаются в левом верхнем углу браузера.

В firebug я установил оба div с помощью display: block, чтобы каждый элемент div занимал ряд пробелов. Почему я вижу их сверху слева? Как я могу заставить его выглядеть нормально?

Ответы [ 2 ]

4 голосов
/ 08 февраля 2012

При применении position: fixed элемент вытягивается из естественного потока страницы.Это заставляет все другие элементы игнорировать это положение элементов.Вот почему статический div лежит ниже фиксированного div.

Фиксированная позиция div относится к родительскому элементу, который в данном случае равен body.Поскольку вы не дали ему никаких left top right bottom данных о положении, они просто ведут себя как top: 0; left: 0;, что оказывается точно таким же положением, где ваша статическая div лежит ниже.

Чтобы решить эту проблему, я бы просто добавил то же количество padding-top к body, что и фиксированное значение div.

Подробнее об этом можно прочитать здесь: https://developer.mozilla.org/en/CSS/position

Кстати, div естественно ведет себя так, как если бы вы дали ему display: block.На самом деле, это единственный стиль по умолчанию.

1 голос
/ 08 февраля 2012

Для "position: fixed": элемент расположен относительно окна браузера.Это переопределяет ваши настройки display: block для div.Поэтому, если вы можете, измените позиционирование с fixed на другое значение, и оно будет подчиняться другим правилам элементов.

...