Почему position relative не работает

Свойство position

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

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

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

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

Свойства left/top не будут работать для position:static . Если их все же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

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

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

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

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Как растянуть абсолютно позиционированный блок на всю ширину документа?

Первое, что может прийти в голову:

Но это будет работать лишь до тех пор, пока у страницы не появится скроллинг!

Прокрутите вниз ифрейм:

Вы увидите, что голубой фон оканчивается задолго до конца документа.

Дело в том, что в CSS 100% относится к ширине внешнего блока («containing block»). А какой внешний блок имеется в виду здесь, ведь элемент изъят со своего обычного места?

В данном случае им является так называемый (««initial containing block»»), которым является окно, а не документ.

То есть, координаты и ширины вычисляются относительно окна, а не документа.

Может быть, получится так?

С виду логично, но нет, не получится!

Координаты top/right/left/bottom вычисляются относительно окна. Значение bottom: 0 – нижняя граница окна, а не документа, блок растянется до неё. То есть, будет то же самое, что и в предыдущем примере.

position: absolute в позиционированном родителе

Если у элемента есть позиционированный предок, то position: absolute работает относительно него, а не относительно документа.

То есть, достаточно поставить родительскому div позицию relative , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:

Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от float .

Используем position для размещения элемента управления:

Часть текста перекрывается. Кнопка более не участвует в потоке.

Используем float для размещения элемента управления:

Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.

position: fixed

Это подвид абсолютного позиционирования.

Позиционирует объект точно так же, как absolute , но относительно window .

Разница в нескольких словах:

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

В следующем примере, при прокрутке документа, ссылка #top всегда остаётся на своём месте.

Итого

Виды позиционирования и их особенности.

static Иначе называется «без позиционирования». В явном виде задаётся только если надо переопределить другое правило CSS. relative Сдвигает элемент относительно текущего места.

• Противоположные границы left/right ( top/bottom ) одновременно указать нельзя.
• Окружающие элементы ведут себя так, как будто элемент не сдвигался.

absolute

Визуально переносит элемент на новое место.

Новое место вычисляется по координатам left/top/right/bottom относительно ближайшего позиционированного родителя. Если такого родителя нет, то им считается окно.

• Ширина элемента по умолчанию устанавливается по содержимому.
• Можно указать противоположные границы left/right ( top/bottom ). Элемент растянется.
• Окружающие элементы заполняют освободившееся место.

fixed

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

При прокрутке он остаётся на том же месте.

Почитать

CSS-позиционирование по-настоящему глубоко в спецификации Visual Formatting Model, 9.3 и ниже.

Ещё есть хорошее руководство CSS Positioning in 10 steps, которое охватывает основные типы позиционирования.

Задачи

Модальное окно

Создайте при помощи HTML/CSS «модальное окно», то есть DIV , который полностью перекрывает документ и находится над ним.

При этом все элементы управления на документе перестают работать, т.к. клики попадают в DIV .

В примере ниже DIV’у дополнительно поставлен цвет фона и прозрачность, чтобы было видно перекрытие:

Браузеры: все основные, IE8+. Должно работать при прокрутке окна (проверьте).

Если использовать position: absolute , то DIV не растянется на всю высоту документа, т.к. координаты вычисляются относительно окна.

Можно, конечно, узнать эту высоту при помощи JavaScript, но CSS даёт более удобный способ. Будем использовать position:fixed :

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

Источник

CSS-свойство position: разбираемся с позиционированием элементов

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «A painless guide to understanding CSS positioning».

Если вы хотите действительно хорошо овладеть CSS, очень важно разобраться в свойстве position . Но стоит учесть, что для начинающих эта тема может быть довольно сложной.

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

В этой статье я постараюсь избавить вас от подобных мучений. Я расскажу о каждом из значений CSS-свойства position и покажу, как они работают.

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

Поточная раскладка

То, как элементы отображаются на странице, называется нормальным потоком или поточной раскладкой. Это расположение элементов по умолчанию. Поток — это все элементы вашей страницы, «работающие» вместе и знающие о наличии остальных элементов.

CSS трактует каждый HTML-элемент как отдельный блок (возможно, вы слышали о понятии «блочная модель»). Элементы блочного уровня (заголовки, абзацы или блоки div ) по умолчанию начинаются как бы с новой строки. А строчные (inline) элементы (например, изображения и элементы span ), отображаются в строке вместе с другим контентом. Такое отображение элементов принято по умолчанию и называется нормальным потоком документа. Но CSS дает нам мощный инструмент для перезаписи нормального потока — свойство position .

Давайте рассмотрим, что оно делает.

Свойство position

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

Свойство position имеет пять возможных значений:

1. static (статическое позиционирование)
2. relative (относительное)
3. absolute (абсолютное)
4. fixed (фиксированное)
5. sticky (липкое)

Мы разберем все 5 значений, но сначала обратим внимание на свойства расположения.

Свойства расположения

Само по себе свойство position не слишком-то много и может. Чтобы указать, где именно в документе нужно расположить элемент, мы используем свойства расположения (это не официальное название, это я их так называю). Этих свойств четыре:

Значения этих свойств определяют, насколько позиция элемента должна сместиться и в каком направлении (вверх, вниз, влево, вправо). Чуть позже мы все это разберем на примерах.

Значения свойства position

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

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

Несмотря на то, что это дефолтное значение, оно может задаваться явно. Например, когда вам нужно перезаписать значение position , установленное где-то еще (и унаследованное вашим элементом).

Давайте рассмотрим пример. На нем мы увидим, что указание position: static никак не влияет на отображение элемента.

Здесь у нас три блока div , каждый из которых находится в родительском контейнере с классом box-original .

Давайте добавим position: static для div с классом box-2 и зададим также значения для свойств top и left .

Как видите, несмотря на то, что мы задали свойства top и left , блок располагается в нормальном потоке.

Теперь вы знаете, что значение static является дефолтным для свойства position , а указание свойств расположения не сдвигает элементы, для которых указано position: static .

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

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

В общем, если вы просто задаете элементу position: relative , он остается в нормальном потоке. Но при помощи свойств расположения вы можете его сдвинуть. Давайте рассмотрим пример.

Возьмем код из прошлого примера и заменим position: static на position: relative .

Фиолетовый квадрат сдвинулся со своей нормальной позиции (обозначена серым квадратом). В этом примере задано смещение на 10px от верха и от левого края этого же элемента в дефолтном положении (т. е. смещение вниз и вправо).

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

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

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

Когда элементу задано позиционирование position: absolute , все остальные элементы ведут себя так, будто этого элемента вообще больше нет в документе. Поэтому для этого элемента не резервируется место поточной раскладке. Абсолютное позиционирование — мощный инструмент в деле перемещения элементов.

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

Это очень важный момент. Если ближайший родительский элемент не имеет указанного свойства position , элемент с абсолютным позиционированием будет позиционироваться относительно следующего в иерархии родительского элемента, имеющего это свойство. Если у элемента вообще не будет позиционированных предков, он будет позиционироваться относительно элемента html или viewport. Не зная этого, можно долго ломать голову, почему все работает не так, как задумано.

Элемент с абсолютным позиционированием можно перемещать как угодно. При помощи свойств top , left , bottom и right вы можете определить, где должен находиться этот элемент относительно его позиционированного предка (первого в иерархии среди имеющих значение position , отличное от static ).

Вернемся к нашему примеру. Изменим свойство position второго блочного элемента на position: absolute . Прежде чем рассматривать результат, вернитесь к предыдущему пену и обратите внимание на позиционирование элемента parent-box .

Вы видите, что в документе не создалось пустого места для нашего элемента. Фактически это место схлопнулось, и другие элементы ведут себя так, будто на этом месте вообще ничего никогда не было. Так происходит потому, что наш элемент теперь позиционируется относительно элемента parent-box .

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

Фиксированное позиционирование работает подобно абсолютному. Оно удаляет элемент из нормального потока документа, причем под этот элемент в раскладке больше не отводится никакого места.

Элементы с фиксированным позиционированием позиционируются относительно viewport. (Viewport — это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке, — MDN).

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

Давайте изменим позиционирование box-2 с position: absolute на position: fixed . Также мы изменим значение свойства top на 0 и удалим значение свойства left . Еще мы добавим несколько дополнительных блоков, чтобы увидеть эффект при прокрутке.

Как видите, фиолетовый блок теперь зафиксирован вверху страницы. Мы добились такого эффекта, установив для него position: fixed и top: 0px .

При использовании position: fixed важно помнить, что элемент будет постоянно занимать какое-то место в зоне просмотра. Это может негативно сказаться на пользовательском опыте, особенно на мобильных устройствах, где пространство ограничено. Так что обдумывайте, как все будет выглядеть на разных устройствах.

Липкое позиционирование

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

Давайте рассмотрим новый пример. Мы зададим dt свойство position: sticky и top: 3px (т. е. смещение на 3px от верха страницы).

Попробуйте прокрутить страницу, и увидите, как работает липкое позиционирование.

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

Работать с липким позиционированием надо осторожно, потому что не все браузеры его поддерживают (по крайней мере, на момент написания статьи). Проверить поддержку можно при помощи caniuse.com.

Где во всем этом место Z-индекса?

z-index — это CSS-свойство, позволяющее задавать порядок позиционированных элементов по оси z. Любой элемент, которому вы задали свойство position , отличное от static , может позиционироваться и по оси z.

В целом, z-index позволяет контролировать порядок расположения и, таким образом, перекрытие элементов. С его помощью вы определяете, какие элементы должны стоять на переднем плане, а какие — сзади.

Элементы с большим значением z-index отображаются перед элементами с меньшими значениями.

Рассмотрим пример. Я покажу, что при использовании z-index порядок элементов в html-разметке не имеет значения, мы можем сменить их позицию с передней на заднюю.

Мы зададим каждому классу box позицию fixed , что позволит нам изменить z-index каждого из box -элементов.

See the Pen Z-index by Peter (@pin0s) on CodePen.

Как видите, элементы с более высоким значением z-index идут на переднем плане, а с более низким — на заднем.

Заключение

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

Мы можем применять пять значений свойства position :

Положение элемента задается при помощи свойств top , left , bottom и right . Значения этих свойств указывают, насколько должен сместиться элемент от указанной точки.

Если элемент позиционирован, причем значение position — не static , можно задавать положение этого элемента по оси z. Это делается при помощи свойства z-index . Чем выше значение этого свойства, тем ближе к переднему плану выводится элемент. Элементы с более низкими значениями z-index выводятся на заднем плане.

Самый лучший способ разобраться в CSS-свойстве position — поиграться с ним. Возьмите пены, приведенные здесь в качестве примеров, попробуйте поменять в них какие-нибудь значения и посмотрите, к чему это приведет.

Источник