Главная » Создание сайтов » Верстка » Css свойство position: куда полетим?

Css свойство position: куда полетим?

Css свойство position: куда полетим?
Доброго времени суток. По просьбе читателей, сегодня я расскажу о css свойстве position. Многие верстальщики пользуются этим свойством как position: absolute или position: relative, но большинство начинающих даже не догадываются о том, что у этого свойства есть еще три значения.

Свойство position тесно связано с порядком элементов на странице. Что же такое порядок элементов?

По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе. Так, блочные элементы, имеют прямоугольную форму и занимают 100% ширины и поэтому располагаются один под другим. Один, ниже другой... Строчные элементы занимают ширину, равную содержимому внутри и поэтому располагаются в строчку. Один, рядом другой, потом третий... Так каким здесь боком position? А position имеет возможность управлять этим порядком и при необходимости изменять.

Стандартное значение, которое принимает position: static.
Если вы верстаете и для проверки применили это значение к элементу, не удивляйтесь если ничего не произошло. Просто static устанавливает порядок элементов, когда один идет за другим так, как установлено в документе.

position: Absolute
Располагается в окне браузера в соответствии с заданными координатами. Обратите внимание на то, что располагается элемент в окне браузера, а не во всей страницы, как думают многие.
Координаты можно задавать при помощи: top, right, bottom, left.

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

Так же важно помнить от какой начальной точки будет позиционироваться элемент.
Css свойство position: куда полетим?
Левый вариант. Блок позиционируется относительно окна браузера.
Правый вариант. Блок позиционируется относительно родительского блока.

Почему это происходит? Дело в том, что элемент, которому присвоено это значение, располагается относительно ближайшего родителя, которому задано position: relative или absolute.

position: Relative
Элемент располагается относительно своего первоначального месторасположения (при помощи top, right, bottom, left). Но. Но свое место он не уступает, оно остается за элементом.

Css свойство position: куда полетим?

position: Fixed
Это значение нарушает обычный порядок элементов так же, как и absolute, но фиксирует сам элемент относительно границ окна. Другими словами, этот элемент при скролле не изменяет свое место расположения.

Моя предыдущая статья, как раз основана на использовании этого значения:
Фиксированный логотип относительно окна браузера

Помните. Во всеми любимом браузере IE 6 (и ниже) это значение не поддерживается. Я не буду писать о попытках решения этой проблемы, так как их много и не каждому они понравятся. Пусть каждый найдет себе решение сам. Скажу честно, никогда не использовал решения этой проблемы.

position: Inherit
При использовании этого значения, элементу присваивается такое же значение как и у родителя.
Пример:

#parent{
position:absolute;
}
#element{
position:inherit;
}

<div id="parent">
<div id="element">
У меня position со значением absolute..
</div>
</div>

Думаю я все подробно описал. Если у кого-то остались вопросы, задавайте, попробую ответить. С уважением, Vasilenko Ivan!

Комментарии — 8 комментариев

  1. #9305 lo[p]ata в 19:53, 2 февраля 2010: (подписался)

    Ответить | Цитировать

    отличная статья, отличный блог!!!

  2. #9306 promokachka в 20:54, 2 февраля 2010: (подписался)

    Ответить | Цитировать

    Вот. А я каждый раз голову ломаю — что от чего зависит. А тут просто и доходчиво. Спасибо!

  3. #9309 WebMast в 18:00, 3 февраля 2010:

    Ответить | Цитировать

    Очень рад, что статья вам понравилась. Если еще есть предложения для статей, отправляйте на почту : ).

  4. Про методы имитации position: fixed зря не написал по-моему. Это же самое интересное :-)

  5. Я имею в виду имитацию для IE 6 конечно )) забыл написать )))

  6. #9417 WebMast в 10:59, 2 марта 2010:

    Ответить | Цитировать

    Ну, тут дело принципа : ).

  7. #10720 Pipe в 15:10, 24 ноября 2010:

    Ответить | Цитировать

    Спасибо за стаью, сейчас занимаюсь версткой, очень помогло...

  8. #19339 genyfild в 18:39, 24 апреля 2013:

    Ответить | Цитировать

    Супер! Спасибо, без воды, и достаточно четко осветил основные моменты. Думаю тебе можно писать руководство по CSS, получится не плохо если придерживаться принципа этой статьи :)

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя