Позиционирование элементов. Position (absolute, relative и fixed) — способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Они работают со всеми позиционированными элементами, кроме статических.
Пример позиционирования.
Элементы могут перекрывать друг друга!
Отображение элемента над остальными!
Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.
Перед тем как подробно разобрать все виды позиционирования элементов на странице, нам придется рассмотреть, что такое поток документа.
Поток документа
По умолчанию элементы на веб-странице отображаются в том порядке, в котором они представлены в HTML-документе, т. е. блочные элементы занимают всю доступную для них ширину и укладываются вертикально один под другим. Строчные элементы выстраиваются по горизонтали до тех пор, пока не будет занята вся доступная ширина, после того как вся ширина будет занята, будет сделан перенос строки и всё пойдет по новой. Такой порядок расположения элементов называется нормальным потоком (его также называют потоком документа или общим потоком ).
С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент "выпадает" из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.
Статическое позиционирование
Статическим называют позиционирование, заданное по умолчанию для всех элементов на веб-странице. Если к элементу не применять свойство position , то он будет статическим и будет отображаться на веб-странице согласно общему потоку элементов.
При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.
Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:
Первый абзац.
Второй абзац.
Попробовать »Фиксированное позиционирование
Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.
Стоит обратить внимание на то, что элементы с фиксированным позиционирование могут перекрывать другие элементы, скрывая их полностью или частично. При прокрутке длинных страниц, они создают эффект неподвижных объектов, оставаясь на одном и том же месте:
Текст Текст Текст Текст Текст Текст Текст Какой-то текст Текст Текст Текст Текст ТекстПопробовать »
Относительное позиционирование
Элементы с относительным позиционированием, как и статические элементы, остаются в общем потоке. При применении свойств top , left , right или bottom к относительно позиционированным элементам, они будут смещаться относительно своего местоположения, оставляя пустое пространство там, где элемент располагался изначально.
Такие элементы не влияют на расположение окружающих их элементов, остальные элементы остаются на своих местах и могут быть перекрыты относительно позиционированным элементом:
Заголовок первого уровня.
Относительно позиционированный заголовок.
Заголовок третьего уровня.
Попробовать »Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).
Абсолютное позиционирование
Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .
Все абсолютно позиционированные элементы размещаются относительно окна браузера или относительно ближайшего позиционированного предка (если он есть), у которого свойство position имеет значение absolute , fixed или relative .
Изменим расположение логотипа с помощью абсолютного позиционирования.
Теперь логотип будет располагаться в правом верхнем углу страницы.
Перекрывающие элементы
Когда элементы находятся вне общего потока страницы, они могут перекрывать друг друга. Обычно порядок расположения элементов соответствует их порядку в HTML-коде страницы, однако есть возможность управлять порядком перекрытия с помощью CSS свойства z-index , чем больше его значение, тем выше будет элемент.
Свойство position - это универсальное и мощное свойство. Оно позволяет установить или изменить положение элемента и содержит четыре возможных значения :
- static (значение по умолчанию)
- relative
- absolute
- fixed
Часто используется наряду с четырьмя свойствами координат:
- left
- right
- bottom
static
Это значение position по умолчанию : статичные элементы просто следуют естественному потоку . Любые значения left , right , top или bottom не оказывают влияния.
relative
Когда position установлено относительно , элемент может перемещаться относительно его текущей позиции .
Едва мы спрятали лодку, Джа увлёк меня в джунгли, и вскоре мы вышли на узкую, хорошо утоптанную тропу.
Я ринулся вверх, пытаясь в последнем усилии дотянуться до руки Джа, но ситик с такой силой рванул копьё на себя, что оно вырвалось из рук мезопа, едва не сорвавшегося со скалы, а я, всё ещё цепляясь за древко, полетел вниз, прямо в раскрытую пасть зверюги.
Он уже перешёл на бег, замахиваясь на ходу тяжёлым копьём.
P { border: 1px solid blue; }
Давайте переместим второй абзац:
Second { position: relative; border-color: red; left: 20px; top: 10px; }
Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.
Обратите внимание, что синие абзацы не сдвинулись вообще. При использовании относительного позиционирования, красный абзац может свободно перемещаться, не нарушая макет. Единственное, что сдвигается со своего места, так это сам элемент. Все остальные элементы не знают, что элемент переместился .
absolute
Когда position устанавливается абсолютно , элемент может перемещаться относительно первого позиционированного предка .
Позиционированного? Что такое позиционированный элемент?
Позиционированный элемент - это тот, у которого значение position установлено как relative , absolute или fixed . Таким образом, если положение не задано статичным, то элемент позиционированный .
Характеристикой позиционированного элемента является то, что он может выступать в качестве точки отсчёта для своих дочерних элементов .
Давайте представим простую иерархию:
Я позиционирован абсолютно!
Section {
background: gold;
height: 200px;
padding: 10px;
position: relative; /* Превращает */
}
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
отбрасывается. Когда position
задано как fixed
, оно действует как абсолютное
: вы можете установить координаты слева/справа и сверху/снизу. Единственное отличие состоит в том, что точкой отсчёта является окно просмотра
. Это означает, что фиксированный элемент не перемещается
со страницей, он фиксируется
на экране. Свойство position распространяется на все элементы и может иметь одно из пяти возможных значений: Свойство определяет схему позиционирования элемента
относительно его родителя. Элементы с абсолютным и фиксированным позиционированием рассматриваются как блочные. Значения: static
— статическое позиционирование, как есть. Остальные значения рассмотрим подробнее. Элемент смещается относительно своего положения на величины, заданные значениями свойств Bottom, Left, Right, Top . Это не оказывает влияние на расположение элементов в нормальном потоке, следующих за ним, как будто он не смещался. Element { position: relative; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;} Элемент с абсолютным позиционированием занимает положение, определённое значениями свойств Bottom, Left, Right, Top
, которые задают его смещение относительно границ родителя. Причем значение свойства Position
родительского элемента оказывает влияние на размер и положение позиционированного. Если у него значение static
или родителя нет, то смещение происходит относительно границ окошка браузера. Блоки с абсолютным позиционированием исключаются из нормального потока, не оказывая влияния на расположение остальных элементов. Element { position: absolute; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;} — аналогично предыдущему примеру, только для элемента взято абсолютное позиционирование. Он перекрыл предыдущий элемент, смещение отсчитывалось от границ родителя: Положение элементов с фиксированным позиционированием определяется, как и у абсолютно позиционированных. С той только разницей, что они жёстко привязаны к границам области просмотра и не меняют своего положения в окошке браузера при прокрутке страницы. Используют значение fixed
редко. Как правило, это горизонтальное меню вверху или внизу страницы, как в почте Яндекса. Свойство задаёт размещение позиционированного элемента относительно оси Z. Что означает: элементы накладываются друг на друга в порядке возрастания — чем больше значение свойства z-index, тем выше расположен элемент. Действует только для элементов, у которых задано значение свойства Position
и отлично от static
. Значения: auto
— элементы размещаются в порядке их расположения в коде страницы. Element-1, .element-2, .element-3 { position:relative;} — в качестве второго элемента у нас изображение. Поменялся порядок размещения у первого и третьего элементов. Нижний элемент-1 разместился сверху, а 3-ий оказался нижним «слоем»: Я, как и автор статьи, много до чего добрался в CSS методом тыка, а ещё больше упустил. В особенности времени. И если бы сразу разобрался с принципами таких штук, как позиционирование и обтекание (positioning, float), то простые задачи действительно оказались бы простыми с самого начала. Для этого часто не хватает мест, где бы нам на пальцах объясняли коллизии и аномалии тех языков программирования, которым нас внезапно не обучают с детства. Ну не понятны они нам на интуитивном уровне, чо уж. Да и хэлпы не всегда прочитываются. Если у вас та же история, то это ваше чтение на вечер. Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок. В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов: Немного расчитстим дорогу, убрав inherit
, просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается. По умолчанию же, позиционирование выставляется в static
. Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML. Теперь fixed
. Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке . Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента. Так что, с тремя значениями позиционирования мы разобрались и можем считать их понятными. Просто потому, что их функционал не имеет, ни повторений, ни вариаций. Остаются интересности — absolute
и relative
. Взглянем на них по отдельности, а потом на то, как они могут быть использованы вместе. А ещё на то, какие интересные результаты это может дать. Абсолютное позиционирование позволяет выдернуть объект из обычного потока документа и сунуть его в конкретную точку на странице. Создадим простой список — unordered list. Как мы знаем, его пункты уже в значении static, автоматом. Это значит то, что они текут себе в потоке других элементов документа там, куда помещены согласно его html-структуре. Теперь посмотрим — что случится, если одному из пунктов списка назначить absolute
с нулевыми координатами. >ul li:nth-child(4){ Как видим, он выкидывается из общего потока и размещается в верхнем левом углу окна браузера. Заметим, что абсолютно позиционированному элементу всё равно — есть ли на том месте какой-нибудь другой или нет. Он всё равно будет помещёно согласно координатам. Итак, абсолютное позиционирование нужно нам тогда, когда требуется поместить элемент именно в том месте экрана, где мы хотим его видеть. Соответственно, отмеряется его положение отступами сверху, справа, снизу и слева границы окна. Например, поместим тот самый четвёртный пункт списка с отступом в двадцать пикселей слева и двадцать сверху. ul li:nth-child(4){ Немного сдвинулся вниз и направо. А чтобы подтвердить сказанное о том, что элементу с абсолютным позиционированием нет разницы до расположения других, зададим ему такие координаты, которые обеспечат форменный наезд. ul li:nth-child(4){ В заключение, отметим поведение остальных пунктов списка. При удалении из потока четвёртого, остальные атоматически подравниваются в очереди так, как будто его там и не было: за третьим сразу идёт пятый. Запомним это, а потом используем в своих интересах. Относительное позиционирование работает так же, как и абсолютное — заданием объекту его положения координатами сверху, справа, снизу и слева. Разница лишь в отправной точке: в положении точки нулевых координат. Для абсолютного позиционирования ею был край экрана браузера. А для относительного? Посмортим: ul li:nth-child(4){ Как так? Четвёртый пункт остался на своём месте в потоке элементов. Всё потому, что отправной точкой для его координат теперь служит не край окна браузера, а предшествующий ему эелемент в потоке. Он же — его родительский. Теперь, если мы изменим положение нашего подопытного на двадцать пикселей, то наглядно оценим результат таких взаимоотношений. ul li:nth-child(4){ Этот экстрим бывает полезен в реальных ситуациях. Например, когда мы не хотим выкидывать элемент, а желаем поиграться с его наложением на другие. При этом заметим: относительное позиционирование не заботится о нижних элементах так же, как и абсолютное. Но зато здесь они уже не занимают место выбывшего. Теперь, когда мы усвоили базовые правила поведения HTML-элементов с абсолютным и относительным позиционированием через CSS, создадим полноценный и наглядный пример работы всего этого дела. Начнём, создав HTML-блок класса «photo» и сразу сунем в него картинку 200×200 пикселей.fixed
position:static
Из раздела 9 :
Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства "top
", "right
", "bottom
" и "left
" не применяются.
этом примере :
Что следует помнить:
position:relative
Из раздела 9 Модель визуального форматирования :
Положение блока рассчитывается в соответствии с нормальным потоком (это называется позиционированием в нормальном потоке). Затем блок смещается относительно своего нормального положения. Когда для расположения блока используется модель относительного позиционирования, то положение следующего рассчитывается так, как будто первый блок не был смещён относительно своего нормального положения.
На что следует обратить внимание в этом примере :
Что следует помнить:
position:absolute
Из раздела 9 Модель визуального форматирования :
Положение блока (можно и размер) указываются с помощью свойств "top"
, "right"
, "bottom"
, и "left"
. Они указывают смещение относительно содержащего блока. Абсолютно позиционируемые блоки изымаются из нормального потока и не влияют на размещение следующих элементов потока. Следует заметить, что поля блоков с абсолютным позиционированием не перекрываются ни какими другими полями.
На что следует обратить внимание в этом примере :
Что следует помнить:
position:fixed
Из раздела 9 Модель визуального форматирования" :
Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
На что следует обратить внимание в примере :
Что следует помнить:
@media print {
#logo {position: static;}
}
position:inherit
Если для блока указан position:inherit
, то он будет принимать такие же вычисленные значения свойств как и его родительский блок.
Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction
и visibility
(см )Что следует помнить:
Смещение блока
Помните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top
, right
, bottom
и left
вычисляются в соответствии с размерами содержащего блока
(который может быть не родительским блоком)
"position"
и "overflow"
Блок со стилем overflow:hidden
будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с "position"
установленной в "absolute"
, "relative"
и "fixed"
).
Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden
если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
Поля
Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
В случае с IE
В IE позиционирование блока может быть благословением или проклятием:
Порядок наложения и уровень наложения
Аналогия с призраками DrLangbhani:
Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.
letter-spacing
line-height
list-style
margin
max-height
max-width
min-height
min-width
outline
overflow
padding
position
right
text-align
text-decoration
text-indent
text-transform
top
vertical-align
white-space
width
word-spacing
С
войство POSITION
Свойство
Значения
Пр*
Нc*
position
static
, relative, absolute, fixed, inherit
+
-
inherit
— наследование свойств от родителя.Значение relative: относительное позиционирование
— для блока с картинкой задано позиционирование relative
и смещение сверху на 25px и слева на 50px. Элемент сместился относительно нормального потока, на практике удвоив эти значения:Значение absolute: абсолютное позиционирование
Значение fixed: фиксированное позиционирование
С
войство Z-INDEX
Свойство
Значения
Пр*
Нc*
ЦЕЛОЕ ЧИСЛО, auto
, inherit
+
-
inherit
— наследование от родителя.
.element-1 { z-index:3; left:40px; top:50px; font-size:46px;}
.element-2 { z-index:2; left:50px;}
.element-3 { z-index:1; top:-50px;font-size:76px; color:#999;}
Пять значений позиционирования
Абсолютное позиционирование
position:absolute;
left:0; top:0;}
position:absolute;
left:20
px; top:20
px;}
position:absolute;
left:60
px; top:80
px;}Относительное позиционирование
position:relative
;
left:0
px; top:0
px;}
position:relative
;
left:20
px; top:20
px;}Собираем всё вместе
HTML
Теперь пора перейти к правке нашей 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, то каменты к вашим услугам. Спасём мир.