Position Relative - что это? Подробное описание. Позиционирование HTML элементов в CSS при помощи свойства position (absolute, relative, fixed, static)

*/ } p { background: limegreen; color: white; padding: 10px; position: absolute; /* Делает

Свободно перемещаемым */ bottom: 10px; /* 10px снизу */ left: 20px; /* 20px слева */ }

Жёлтый раздел имеет высоту 200px, а позиционирование задано как relative , что превращает его в точку отсчёта для всех дочерних элементов .

Зелёный абзац позиционирован как absolute и может свободно перемещаться относительно жёлтого раздела. Установив оба значения left и bottom , мы переместим его в левый нижний угол.

Что произойдёт, если мы одновременно установим left и right ?

Если ширина не задана, применение left: 0 и right: 0 растягивает элемент на всю ширину . Это эквивалент установки left: 0 и width: 100% .

Если ширина установлена, то значение right отбрасывается.

fixed

Когда position задано как fixed , оно действует как абсолютное : вы можете установить координаты слева/справа и сверху/снизу.

Единственное отличие состоит в том, что точкой отсчёта является окно просмотра . Это означает, что фиксированный элемент не перемещается со страницей, он фиксируется на экране.

Я, как и автор статьи, много до чего добрался в CSS методом тыка, а ещё больше упустил. В особенности времени. И если бы сразу разобрался с принципами таких штук, как позиционирование и обтекание (positioning, float), то простые задачи действительно оказались бы простыми с самого начала. Для этого часто не хватает мест, где бы нам на пальцах объясняли коллизии и аномалии тех языков программирования, которым нас внезапно не обучают с детства. Ну не понятны они нам на интуитивном уровне, чо уж. Да и хэлпы не всегда прочитываются.

Если у вас та же история, то это ваше чтение на вечер.

Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок.

Пять значений позиционирования

В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов:

1. Static — статическое.
2. Relative — относительное.
3. Inherit — унаследованное.
4. Fixed — фиксированное.
5. Absolute — абсолютное.

Немного расчитстим дорогу, убрав inherit , просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается.

По умолчанию же, позиционирование выставляется в static . Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML.

Теперь fixed . Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке . Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента.

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

Абсолютное позиционирование

Абсолютное позиционирование позволяет выдернуть объект из обычного потока документа и сунуть его в конкретную точку на странице. Создадим простой список — unordered list.

• ЧЕТЫРЕ

Как мы знаем, его пункты уже в значении static, автоматом. Это значит то, что они текут себе в потоке других элементов документа там, куда помещены согласно его html-структуре. Теперь посмотрим — что случится, если одному из пунктов списка назначить absolute с нулевыми координатами.

>ul li:nth-child(4){
position:absolute;
left:0; top:0;}

Как видим, он выкидывается из общего потока и размещается в верхнем левом углу окна браузера. Заметим, что абсолютно позиционированному элементу всё равно — есть ли на том месте какой-нибудь другой или нет. Он всё равно будет помещёно согласно координатам.

Итак, абсолютное позиционирование нужно нам тогда, когда требуется поместить элемент именно в том месте экрана, где мы хотим его видеть. Соответственно, отмеряется его положение отступами сверху, справа, снизу и слева границы окна.

Например, поместим тот самый четвёртный пункт списка с отступом в двадцать пикселей слева и двадцать сверху.

ul li:nth-child(4){
position:absolute;
left:20 px; top:20 px;}

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

ul li:nth-child(4){
position:absolute;
left:60 px; top:80 px;}

В заключение, отметим поведение остальных пунктов списка. При удалении из потока четвёртого, остальные атоматически подравниваются в очереди так, как будто его там и не было: за третьим сразу идёт пятый. Запомним это, а потом используем в своих интересах.

Относительное позиционирование

Относительное позиционирование работает так же, как и абсолютное — заданием объекту его положения координатами сверху, справа, снизу и слева. Разница лишь в отправной точке: в положении точки нулевых координат. Для абсолютного позиционирования ею был край экрана браузера. А для относительного?

Посмортим:

ul li:nth-child(4){
position:relative ;
left:0 px; top:0 px;}

• ЧЕТЫРЕ

Как так? Четвёртый пункт остался на своём месте в потоке элементов. Всё потому, что отправной точкой для его координат теперь служит не край окна браузера, а предшествующий ему эелемент в потоке. Он же — его родительский.

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

ul li:nth-child(4){
position:relative ;
left:20 px; top:20 px;}

Этот экстрим бывает полезен в реальных ситуациях. Например, когда мы не хотим выкидывать элемент, а желаем поиграться с его наложением на другие. При этом заметим: относительное позиционирование не заботится о нижних элементах так же, как и абсолютное. Но зато здесь они уже не занимают место выбывшего.

Собираем всё вместе

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

HTML

Начнём, создав HTML-блок класса «photo» и сразу сунем в него картинку 200×200 пикселей.

Теперь пора перейти к правке нашей CSS.

Базовая CSS

Сначала сменим фон на тёмный. Потом добавим фотке базовые стили: сделаем ей рамку и навешаем теней.

body { background: #69C; }

Photo {
border: 5px solid white;
height: 200px; width: 200px;
margin: 50px auto;

/*сложные, но клёвые тени*/
-webkit-

box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Ну, в общем — вот наша картинка. Ничего особенного, но полигон создан.

Привешиваем полоску скотча

Скажем так: мы хотим создать впечатление того, что фотки прилеплены к стене кусками скотча. Для этого нам потребуется показать то, чему уже научились и прибавить псевдо-элемент.

Во-первых, для создания нашей плёнки, мы используем псевдо-элемент «до» — «:before». Его CSS-настройки скажут быть скотчу высотой в двадцать и длиной в сто пикселей. Да ещё с белым фоном, которому назначена непрозрачность в пятьдесят процентов, плёнка же. Ну и тенюшка, куда без неё.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;

}

Да, тут плёнка так ничего не приклеит, кроме себя самой...

Очевидно то, что у нас проблемы с позиционированием псевдо-элемента. Попробуем исправить положение при помощи относительного позиционирования.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:relative ;
top:0 px; left:0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Здорово. Какой эффект...

Как видим, проблему мы не решили. Ну, раз относительное позиционирование не сработало, то пойдём в противоположном направлении и попробуем абсолютное.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:absolute ;
top:0 px; left:0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

А вот это уже ближе к теме.

Наконец-то скотч принял заказанный вид. Но пока что он скучает в каком-то углу. Сразу напрашивается изменение координат, чтобы подвинуть его туда, куда нам нужно. Но это не решение: лента встанет в определённую точку и начнёт елозить вместе с изменением размера экрана.

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

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

Что нам с этого? Очень многое: мы можем использовать абсолютное позиционирование для скотча. Но перед этим, должны изменить кое-что у его родителя, у фотки. И раз мы не хотим, чтобы скотч произвольно двигался по фотке в зависимости от разрешения экрана, то применим к ней относительное позиционирование.

Photo {
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position:relative ;

-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute ;
top: 0 px; left: 0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Итак, псевдо-эелемент с абсолютным позиционированием, выбрал точкой отсчёта своих координат верхний левый угол первого из нестатичных предков. А именно — угол фотки, как раз соответствующий этому описанию. Так что скотч будет всегда приклеен к этому углу, даже если изменится размер окна бразузера.

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

Photo:before {
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute ;
top: -15 px; left: 50 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

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

А ещё загляните на «Тинкербин». По сути — это такой полезный генератор кодов различных эффектов.

Заключение

Размещение блочных элементов может оказаться действительно сложной задачей без освоения базовых понятий о нём. Однако, нужно держать в памяти всего три вещи, чтобы вовремя применять и комбинировать их параметры.

Первое — это то, что относительное позиционирование позволяет нстроиться относительно конкретной отправной точки. Второе — то, что настроиться можно и относительно первого нестатичного предка, а не только края окна браузера, как это происходит при значении «position: none» . И наконец: ни относительное, ни абсолютное позиционирование объекта не влияет на статические и фиксированные оъекты, его окружающие. Вспомним из начала статьи: абсолютно отпозиционированные элементы удаляются из потока, а относительные занимают чужие позиции.

Примечания

• Несвежие мобилы и таблетки плохо воспринимают параметр позиционирования «fixed» . Вернее не воспринимают. Меню, которому он назначен, катаются по экрану вместе с контентом так, как если бы они были «static» . С появлением iOS 5+ всё нормализовалось, но не раньше.
• То, как всё здесь написанное воспринял, например, седьмой Internet Explorer — даже обсуждать не охота. Ещё меньше было желания думать о том, как хачить под него CSS. Поэтому для упыря я нашлёпал скринов всей красоты и закодил их в HTML конструкциями, типа:

  
  Сюда тупо скрин для Эксплорера.
  

  
  А сюда полноценный код для нормальных браузеров.
  

  Так что, если не лень накидать своих решений чисто по CSS, то каменты к вашим услугам. Спасём мир.

Позиционирование задаётся с помощью свойства position . Свойство может иметь четыре значения, которые мы и рассмотрим.

Абсолютное позиционирование

Абсолютное позиционирование задается так:

Position: absolute

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

Теперь его можно перемещать с помощью свойств left , right , top и bottom . По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative , то смещение происходит относительно родительского блока.

Block{ position: absolute; bottom: 0; right: 0; background: gray; }

Элемент с классом block будет сдвинут в нижний правый угол браузера.

Рассмотрим пример, когда блок находится внутри родительского элемента.

Блок внутри родительского элемента

Мы сначала родительскому контейнеру записали относительное позиционирование (relative ), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper .

Относительное позиционирование

Относительное позиционирование записывается так – position: relative . Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden , когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top , left и так далее.

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

Стандартный блок

Стандартный блок

Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.

Стандартный блок

Как видите, можно задавать и отрицательные значения.

Фиксированное позиционирование

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:

Block{ position: fixed; }

По поведению фиксированное смещение схоже с абсолютным – элемент выпадает из нормального потока, его место освобождается и другие элементы вообще его не замечают. С помощью такого приема можно очень легко сделать верхние, нижние, боковые панели на своем сайте, которые не будут исчезать при прокрутке и всегда находиться на виду.

Статическое позиционирование

Последний вид – статическое позиционирование, это обычное поведение блочный элементов. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определенных событиях на веб-странице в сценариях JavaScript.

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

document.getElementById("elementID ").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit .

Верстка HTML - процесс длительный, скрупулезный, но весьма творческий. Несмотря на то что для большинства людей, занятых в сфере IT, верстка веб-страниц может показаться скучной рутиной, специалисты, имеющие призвание к подобному делу, не только качественно выполняют задачи, но и получают от самого процесса ощутимое удовольствие.

Однако прежде чем стать опытным верстальщиком, каждый новичок проводит уйму времени, изучая различные инструкции и спецификации как по языку HTML, так и по его союзнику - CSS. Именно о том, для чего он нужен и какие «финты ушами» позволяет вытворять, а также об одном из его популярных свойств - Position Relative - мы сегодня и поговорим.

Что такое CSS?

Аббревиатура CSS может быть расшифрована и переведена на русский язык как «каскадные таблицы стилей». Звучит довольно странно - с одной стороны, вроде и слова понятные, а с другой - общий смысл улавливается далеко не сразу. Начнем с простого - со стилей. Данная технология позволяет придавать объектам на странице определенные характеристики, касающиеся внешнего вида, которые можно прописать лишь однажды, а использовать бесконечное количество раз.

Слово «таблицы» в официальном переводе оказалось практически случайно - на самом деле уместнее здесь было бы употребление слова «листы» или «списки», тем не менее авторы первоначального перевода решили, что на таблицу CSS похож больше, чем на список, и кто мы такие, чтобы теперь их судить.

Наконец, слово «каскадные». Дело в том, что каждый элемент может иметь сразу несколько стилей, которые могут смешиваться или даже пересекаться. В подобных случаях браузеру приходится прибегать к ряду правил, дабы правильно скомпоновать внешний вид блока, у которого оказалось несколько стилей, при этом один из них, например, имеет свойство Position Relative, а другой - Position Absolute. На самом деле подобные конфликты допускать нельзя, но в крупных проектах подобная путаница происходит довольно часто.

Итак, теперь, когда с названием все понятно, давайте рассмотрим один простой пример. Допустим, на вашем сайте должно быть большое количество кнопок, оформленных определенным образом. У них есть такие свойства, как размер, тень, прозрачность, цвет. Конечно, можно указывать данные параметры, создавая каждую кнопку, но гораздо проще будет использовать CSS. На практике вам необходимо описать некий класс, в котором будут перечислены значения всех вышеупомянутых свойств, а затем, вместо длинного перечисления, в теге каждой кнопки нужно будет лишь указать имя этого класса, после чего браузер сам покрасит эти элементы в нужные цвета и придаст им должный «лоск».

Для чего нужно свойство Position?

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

Какие значения может принимать свойство Position?

Наше свойство может принимать несколько разных значений, их всего пять. Вот краткое описание каждого из них:

• Position Inherit. Данное свойство позволяет скопировать данные о позиции у элемента, являющегося родительским. Например, если у вас есть div с указанным Position Relative, то вписанный в него IMG со значением inherit также получит значение Relative.
• Position Static. Данное значение придается всем элементам автоматически, если не указано какое-либо другое. Элементы вписываются в позицию по мере упоминания в коде и недоступны для различных «изысков», позволяющих менять их положение.
• Position Absolute. К этому значению свойства Position довольно часто прибегают в тех случаях, когда необходимо создать «плавающий» элемент. Обладая данным значением свойства, элемент остается «невидимым» для остальных составляющих страницы. То есть они располагаются так, словно нашего абсолютного элемента вовсе не существует. Сам же он будет всегда оставаться на месте, вне зависимости от того, как далеко была прокручена страница.
• Position Fixed. Во многом это значение похоже на предыдущее, однако, в то время как абсолютный элемент привязывается к родителю, фиксированный использует исключительно координаты верхнего левого угла экрана браузера, не обращая внимания на остальные элементы, которые ему предшествовали.
• Наконец, Position Relative. Данный тип значения позволяет располагать элемент относительно остальных, что может быть полезно при создании адаптивной разметки, называемой в простонародье «резиновой». Имея данное свойство, элемент будет «раздвигать» остальные, не теряя возможности менять свое расположение на странице.

Особенности работы с Position в различных браузерах

Не все браузеры одинаково совместимы. В то время как большинство альтернативных программ для интернет-серфинга без каких-либо заминок воспринимают значение Position абсолютно верно, «хронически особенный» Internet Explorer рассматривает данное свойство в зависимости от своей версии.

Например, используя уже «похороненный» браузер IE6, вы не сможете использовать значения Fixed и Inherit - «ослик» их попросту проигнорирует. Впрочем, несмотря на то, что с седьмой версии ситуация начала исправляться, и Fixed уже обрабатывался, до Inherit всеми любимый «браузер для скачивания других браузеров» добрался только в своей восьмой ипостаси.

Остальные же обозреватели спокойно обрабатывают Position с первых версий, за исключением Opera, которая обзавелась поддержкой данного свойства в своей 4 вариации, вышедшей в середине 90-х.

Работа с Position в Javascript

На самом деле рассказ о том, как следует работать со свойством Position в Javascript, мы включили лишь ради приличия. Так как данное свойство не обладает какими-либо спецсимволами в названии, использовать JS можно без каких-либо изменений, например, чтобы задать для div Position Relative, следует включить такую строку: div.style.position = ‘relative’.

Как видите, все довольно просто.

Почему Position Relative заслуживает особого внимания?

В то время как большая часть значений свойства Position, мягко выражаясь, «плевала» на окружающие элементы, используя значение "style position: relative", стоит всегда помнить обо всей странице в целом, ибо неправильное его использование может сильно «перекосить» все содержимое экрана.

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

Когда следует использовать относительное позиционирование?

Помимо верстки обычных страниц Relative часто применяется для создания различных интересных эффектов. Например, если вы хотите, чтобы какой-либо элемент «приезжал» на страницу или же, наоборот, плавно отправлялся за ее края, то именно данное свойство может помочь вам реализовать этот «финт».

Подобные «трюки» реализуются через Javascript, либо, если вы стремитесь к прогрессивной верстке, через свойства CSS3, которые позволяют настраивать цикличное изменение значения той или иной переменной.

Кроме того, в некоторых случаях возможно создание «гибридных» значений Position Relative. CSS хоть и не позволяет одновременно задать нечто вроде position: absolute relative, но, используя некоторые хитрости, все-таки можно добиться данного эффекта. Этот подход может пригодиться в тех случаях, когда необходимо создать что-либо вроде сложной или контекстного меню. Рассматривая примеры, мы обязательно приведем описание структуры подобного «гибрида».

Примеры использования относительного позиционирования

Position Relative - это довольно простой, но гибкий инструмент, позволяющий реализовывать множество интересных эффектов. Чтобы не тратить время и место на написание бесполезных шаблонных кодов, мы приведем несколько устных алгоритмов, которые смогут украсить ваш сайт или его отдельные страницы.

Начнем с «выбегающей» строки. Предположим, у вас возникла необходимость в элементе, который будет «выезжать» из-за левого края экрана и постепенно двигаться к его правой стороне. Чтобы реализовать подобный «механизм», следует установить position: relative; left: -100px, где -100 - примерное число пикселей, составляющих ширину блока. Подобный стиль позволит вам спрятать блок за пределами экрана, установив его на «стартовую позицию». Теперь можно использовать скрипт, который будет каждые несколько миллисекунд наращивать значение свойства left на единицу до тех пор, пока оно не станет равным ширине окна браузера минус ширина элемента. В результате мы получаем блок, который появляется из-за левого края, прокатывается через весь экран и «паркуется» у его правой стороны.

Другой пример позволяет создавать «относительно-абсолютные» элементы. Например, вы можете вписать абсолютный внутрь другого, имеющего Position Relative. В результате у нас есть «относительный» блок, не имеющий размера, в который вписан абсолютный, способный теперь проявляться в позиции, зависящей от предшествующих ему элементов.

Типичные ошибки при использовании Position Relative

Наиболее распространенной ошибкой при использовании Position Relative является то, что многие верстальщики забывают о способности резервировать место под блок, который может находиться где угодно. Например, если у вас есть довольно крупный, размещенный за пределами экрана и имеющий относительное позиционирование, на его месте будет зиять «дыра». Впрочем, даже это свойство, иногда создающее определенные неудобства, можно использовать во благо, например, создавая интересный эффект «самособирающегося» сайта, в котором все его блоки постепенно помещаются на позицию top: 0; left: 0; т. е. на свое оригинальное место.