позиционирование CSS Как создать свой сайт > Вебмастеру > Создание своего сайта > Позиционирование в CSS

Позиционирование в CSS

Парень учился в школе живописи…
А я неравнодушен к тем,
кто умеет выразить мир суммой красок и верной пропорцией скипидара.
«Экспансия 1», Юлиан Семёнов.
5 августа 2007

    Что такое позиционирование? Для ответа на этот вопрос достаточно зайти на любой сайт и посмотреть на него со стороны «что и где находится». Например, на этой странице вверху слева находится логотип, а под ним располагается небольшое меню. Таким образом, каждому элементу на странице отведено своё, предназначенное для него место. Но само по себе местонахождение элементов в разных участках страницы не является позиционированием. Позиционирование — это управление расположением элементов на веб-странице.


    Для позиционирования элементов средствами CSS используется свойство position. Оно может принимать одно из 5 значений, о которых я расскажу по порядку.

1. Position: static

    В CSS статическое позиционирование задано для каждого элемента по умолчанию и означает, что элемент выводится в той последовательности, которая задана в HTML-коде документа (“прямом потоке”).

2. Position: absolute

    А вот абсолютно позиционируемый элемент располагается в окне браузера в соответствии с заданными координатами.

    Пример:

#history {
	position: absolute;
	top: 300px;
	background-color: #eee;
	width: 400px;
}

    Значение top: 300px смещает блок #history на 300 пикселов от верхней границы родителя.

    Следует обратить внимание на второй блок #foundations, который выводится в “прямом потоке” HTML-кода. На рисунке (рисунок, к сожалению, недоступен — прим. Seoded.ru) видно, что он оказался на том месте, где находился блок #history. Всё дело в том, что абсолютно спозиционированный блок (#history) не только смещается в соответствии с указанными координатами, но и исключается из “прямого потока”,. Т. е. на том месте, где он должен был находиться, выводятся следующие блоки.

    Для более наглядного представления предлагаю рассмотреть ещё две иллюстрации (к сожалению, так же недоступны — прим. Seoded.ru).

    Для наглядности я использовал всего лишь один блок, у которого менял координаты его расположения на странице.

Внимание! Очень важно понимать, относительно чего смещается свободно позиционируемый блок! Абсолютно позиционируемый блок смещается относительно ближайшего родительского элемента, который имеет значение либо absolute, либо relative. В случае, если ни один из родительских элементов не имеет одного из указанных значений, то смещение происходит относительно внутренней стороны окна браузера.

    Должен отметить, что иллюстраций можно приводить сколько угодно, но для понимания их очень и очень недостаточно. Чтобы хорошо разбираться, как ведут себя абсолютно позиционируемые блоки, самый лучший способ — самому сделать страницу с двумя и более блоками и “поиграться” с ними, назначив одному или нескольким из них свойство position: absolute.

3. Position: relative

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

    Такое позиционирование называется относительно-абсолютным. Т. е. сам элемент смещается, но не исключается из “прямого потока” документа.

4. Position: fixed

    Значение fixed аналогично значению absolute. Разница заключается в том, что при значении fixed элемент фиксируется таким образом, что даже при прокрутке окна браузера он остаётся на месте.

Внимание! Internet Explorer, в отличие от большинства других современных браузеров, не поддерживает значение fixed до 6-ой версии включительно.

5. Position: inherit

    Значение inherit всего лишь указывает на то, что для свойства position принимается значение родительского элемента.

    Пример:

<style type="text/css">
#parent {
	position: relative;
}
#parent #child {
 	position: inherit;
}
</style>

<div id="parent">
	<div id="child">
		Блок #parent является родительским для блока #child.
		Таким образом, блок #child наследует значение relative.
	</div>
</div>

Автор: Никита Мосияш.

Комментарии:


⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

Полезные ссылки:

Копирайтер зарабатывает словами А ещё заработать можно на сайте...

Ещё материалы по этой теме:

Наследование классов в Internet Explorer Вертикальное выравнивание текста в CSS Формирование массива PHP-генератор паролей CSS-свойство «!important»
основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!