HTML. Как отменить абсолютное позиционирование по родительскому элементу?
Как сделать так чтобы элемент по id my_elem позиционировался по body, т.е. нужно как-то проигнорировать position: relative у родительского элемента, возможно для этого есть какое-то специальное свойство, найти ответ в гугле если честно не получилось? P.S. Убрать у родительского элемента position: relative нельзя, т.к. на этом завязаны другие элементы, также как и нельзя перенести элемент my_elem
Отслеживать
задан 2 авг 2018 в 16:08
665 1 1 золотой знак 10 10 серебряных знаков 20 20 бронзовых знаков
position: fixed — не подойдет?
2 авг 2018 в 16:13
position: fixed также идёт по родительскому элементу.
2 авг 2018 в 16:14
написать position: relative !important ну или, то что вам актуально
2 авг 2018 в 16:20
А зачем здесь position: relative !important , он будет просто перебивать все назначенные стили, но тут дело не в этом. Или я как-то не так понял вас, какому элементу нужно добавить данное свойство?
2 авг 2018 в 16:29
не меняя разметку — никак
Как избавиться от position: absolute в CSS
Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще.
Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS.
Введение
Вернёмся на 5 лет назад. Тогда CSS flexbox был новинкой и не мог работать на 100 %, а CSS grid не поддерживался. Мы работали с позиционированием CSS. Но сегодня проблемы тех лет решаются при помощи CSS flexbox или grid.
Наложение карточек
Когда у нас есть карточка, содержащая текст поверх изображения, мы часто используем position: absolute для размещения содержимого поверх изображения. Это больше не нужно при использовании CSS grid.
Вот типичная карточка с текстом над изображением:
Title
Subtitle
Чтобы разместить содержимое над изображением, нужно позиционировать .card__content абсолютно:
.card < position: relative; >.card__content < position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0) bottom/100% 60% no-repeat; padding: 1rem; >Нет ничего плохого в position: absolute из примера выше, но почему не написать проще? Первый шаг — добавить display: grid к компоненту card. Задавать столбцы или строки не нужно:
.card < position: relative; display: grid; >.card__content
По умолчанию CSS grid создаёт строки автоматически, на основе контента. В нашей карточке основных элементов два, и поэтому получится две строки контента. Чтобы перекрыть содержимое с изображением, нужно разместить оба элемента на первой области сетки:
.card__thumb, .card__content < grid-column: 1/2; grid-row: 1/2; >А лучше воспользоваться сокращением grid-area :
.card__thumb, .card__content < grid-area: 1/2; >
Наконец, мы также можем использовать grid-area: 1/-1 . -1 — последний столбец и строку в сетке, поэтому она всегда будет простираться до конца столбца или строки.
Метка карточки (must try)
Хочется расширить предыдущий пример и включить тег в верхнюю левую область карточки. Для этого нам нужно использовать ту же технику — grid-area: 1/-1 , но не хочется, чтобы тег заполнил всю карточку.
Чтобы исправить проблему заполнения, нам нужно указать метке выравнивание по началу контейнера:
.card__tag < align-self: start; justify-self: start; /* Other styles */ >Познакомьтесь с меткой, которая позиционируется над своим родителем без position: absolute :
Раздел Hero
Ещё один идеальный вариант — раздел hero с контентом, который перекрывает изображение.
Похоже на пример с карточкой, но с другой стилизацией содержимого. Прежде чем перейти к современному способу, на минуту вспомним, как это делается при помощи абсолютного позиционирования. У нас есть три слоя:
- изображение;
- градиентное наложение;
- контент.
Это можно сделать разными способами. Если изображение исключительно декоративное, то подходит background-image . В противном случае можно воспользоваться :
.hero < position: relative; min-height: 500px; >.hero__thumb < position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; >/* The overlay */ .hero:after < content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; >.hero__content
Вот так hero реализуется при помощи абсолютного позиционирования. Но можно сделать лучше.
Прежде всего добавим к hero свойство display: grid . И применим тот же принцип, что в компоненте карточки, то есть пропишем grid-area: 1/-1 в каждом прямом потомке элемента hero .
К сожалению, чтобы .hero__thumb работал, высоту hero придётся фиксировать. Если потомок элемента имеет свойство height: 100% , то его родитель должен иметь явное фиксированное свойство height , а не min-height .
.hero < display: grid; height: 500px; >.hero__content < z-index: 1; /* [1] */ grid-area: 1/-1; display: flex; flex-direction: column; margin: auto; /* [2] */ text-align: center; >.hero__thumb < grid-area: 1/-1; object-fit: cover; /* [3] */ width: 100%; height: 100%; min-height: 0; /* [4] */ >.hero:after < content: ""; background-color: #000; opacity: 0.5; grid-area: 1/-1; >Пройду по отмеченным строкам, они важны:
- Мы можем использовать z-index для элементов grid или flex. При этом нет необходимости добавлять position: relative .
- Поскольку .hero__content — элемент grid, свойство margin: auto центрирует его по горизонтали и вертикали.
- Не забудьте включить object-fit: cover при работе с изображениями.
- Я использовал min-height: 0 для изображения на случай, если оно окажется большим. Это нужно, чтобы заставить grid соблюдать height: 100% и не делать изображение больше, чем секция hero, когда используется огромное изображение. Подробнее об этом читайте в статье о минимальном размере контента в CSS grid.
Заметили, что решение стало намного чище?
CSS display: contents
Я думаю, что это первый реальный случай использования display: contents , который был полезен. В примере ниже у нас есть содержимое и изображение.
Вот HTML-код примера:
Order now
До сих пор ничего странного. На мобильных устройствах хочется добиться такого расположения:
Обратите внимание: изображение теперь расположено между заголовком и описанием. Как решить эту проблему? Можно подумать, что разметку нужно изменить так:
Order now
Этот код может работать согласно ожиданиям, а на десктопе нужно расположить ![]()
справа. Он работает, но есть решение с display: contents и оно проще. Чтобы показать его, вернёмся к исходной разметке:
Order now
Обратите внимание: содержимое обёрнуто внутри .hero__content . Как сообщить браузеру о нашем желании, чтобы ,
и стали прямыми потомками ![]()
? При помощи display: contents :
.hero__content
Элемент .hero__content теперь — скрытый призрак. Браузер будет парсить разметку вот так:
Order now
И вот всё, что нам нужно сделать в CSS:
.hero < display: flex; flex-direction: column; >.hero__content < display: contents; >.hero h2, .hero img
При правильном применении display: contents — это мощная техника, позволяющая добиться того, что ещё несколько лет назад было невозможно. Конечно, мы хотим так же обращаться со стилями десктопа:
@media (min-width: 750px) < .hero < flex-direction: row; >.hero__content < display: initial; >.hero h2, .hero img < order: initial; >>
Упорядочиваем элементы компонента карточки
Ниже код варианта карточки, где заголовок размещается в её верхней части. Посмотрим на HTML:
Title
Description
Actions
Обратите внимание: у нас есть два прямых потомка card : изображение thumb.jpg и div с классом card__content . Как с такой разметкой расположить заголовок вверху? Это можно сделать с помощью абсолютного позиционирования:
.card < position: relative; padding-top: 3rem; /* Accommodate for the title space */ >.card h3
Однако это решение может не работать, когда заголовок слишком длинный.
Это происходит потому, что заголовок находится вне обычного потока, а значит, браузеру не важна его длина. При помощи display: contents можно добиться большего:
.card < display: flex; flex-direction: column; padding: 1rem; >.card__content < display: contents; >.card h3
Это позволяет контролировать все дочерние элементы, при необходимости гибко настраивая их порядок свойством order .
Есть небольшая проблема: мы добавили padding: 1rem к родительскому элементу, поэтому изображение должно прилипать к краям. Вот как исправить ситуацию:
.card img
Центрирование
Можно встретить много шуток о том, что центрирование — это сложно. Но в наши дни центрировать элемент проще, чем когда-либо. Больше не нужно использовать position: absolute с transform . К примеру, для центрирования flex-элемента по горизонтали и по вертикали можно воспользоваться margin: auto :
.card < display: flex; >.card__image
Я написал полное руководство по центрированию в CSS.
Соотношение сторон изображения
Новое свойство CSS aspect-ratio сегодня поддерживается во всех основных браузерах. Чтобы заставить бокс соблюдать определённое соотношение сторон, раньше мы использовали этот хак с padding :
.card__thumb < position: relative; padding-top: 75%; >.card__thumb img
С aspect-ratio соблюдать соотношения проще:
/* */ .card__thumb < position: relative; aspect-ratio: 4/3; >
Иногда лучше position: absolute
В этом примере содержимое (аватар, имя и ссылка) перекрывается обложкой карточки. У нас есть два варианта:
- position: absolute для обложки карточки;
- отрицательный margin для содержимого.
Посмотрим на два других решения. Какое из них больше подходит для нашего случая?
Использование абсолютного позиционирования
Так мы можем позиционировать прямоугольник абсолютно, а затем добавить padding: 1rem к содержимому карточки:
.card__cover < position: absolute; left: 0; top: 0; width: 100%; height: 50px; >.card__content
Таким образом, когда обложка карточки будет убрана, нам не придётся изменять CSS.
Использование отрицательного margin
В этом решении карточка не позиционируется абсолютно. Вместо этого содержимое имеет отрицательный margin от верха:
.card__content
Хотя это решение работает, когда обложка у карточки есть, оно может вызвать проблему:
Обратите внимание, что аватар находится за пределами своего родителя (карточки). Чтобы исправить это, изменим CSS и уберём отрицательный margin :
.card--no-cover .card__content
Лучшим решением оказалось position: absolute . Здесь это свойство избавляет от лишнего CSS.
Дополнительные материалы
- Райан Маллиган опубликовал отличную статью о позиционировании оверлейного контента с помощью CSS-grid.
- Стефани Эклз написала замечательную статью об использовании CSS-grid для построения разделов hero.
Разобраться в современном CSS вы сможете на наших курсах:
- Узнать подробности акции
- Профессия Frontend-разработчик (7 месяцев)
- Профессия Fullstack-разработчик на Python (15 месяцев)
Другие профессии и курсы
Data Science и Machine Learning
- Профессия Data Scientist
- Профессия Data Analyst
- Курс «Математика для Data Science»
- Курс «Математика и Machine Learning для Data Science»
- Курс по Data Engineering
- Курс «Machine Learning и Deep Learning»
- Курс по Machine Learning
Python, веб-разработка
- Профессия Fullstack-разработчик на Python
- Курс «Python для веб-разработки»
- Профессия Frontend-разработчик
- Профессия Веб-разработчик
Мобильная разработка
- Профессия iOS-разработчик
- Профессия Android-разработчик
Java и C#
- Профессия Java-разработчик
- Профессия QA-инженер на JAVA
- Профессия C#-разработчик
- Профессия Разработчик игр на Unity
От основ — в глубину
- Курс «Алгоритмы и структуры данных»
- Профессия C++ разработчик
- Профессия Этичный хакер
А также
Как отменить абсолютное позиционирование css
Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще.
Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS.
Введение
Вернёмся на 5 лет назад. Тогда CSS flexbox был новинкой и не мог работать на 100 %, а CSS grid не поддерживался. Мы работали с позиционированием CSS. Но сегодня проблемы тех лет решаются при помощи CSS flexbox или grid.
Наложение карточек
Когда у нас есть карточка, содержащая текст поверх изображения, мы часто используем position: absolute для размещения содержимого поверх изображения. Это больше не нужно при использовании CSS grid.
Вот типичная карточка с текстом над изображением:
Чтобы разместить содержимое над изображением, нужно позиционировать .card__content абсолютно:
Нет ничего плохого в position: absolute из примера выше, но почему не написать проще? Первый шаг — добавить display: grid к компоненту card. Задавать столбцы или строки не нужно:
По умолчанию CSS grid создаёт строки автоматически, на основе контента. В нашей карточке основных элементов два, и поэтому получится две строки контента. Чтобы перекрыть содержимое с изображением, нужно разместить оба элемента на первой области сетки:
А лучше воспользоваться сокращением grid-area :
Наконец, мы также можем использовать grid-area: 1/-1 . -1 — последний столбец и строку в сетке, поэтому она всегда будет простираться до конца столбца или строки.
Метка карточки (must try)
Хочется расширить предыдущий пример и включить тег в верхнюю левую область карточки. Для этого нам нужно использовать ту же технику — grid-area: 1/-1 , но не хочется, чтобы тег заполнил всю карточку.
Чтобы исправить проблему заполнения, нам нужно указать метке выравнивание по началу контейнера:
Познакомьтесь с меткой, которая позиционируется над своим родителем без position: absolute :
Раздел Hero
Ещё один идеальный вариант — раздел hero с контентом, который перекрывает изображение.
Похоже на пример с карточкой, но с другой стилизацией содержимого. Прежде чем перейти к современному способу, на минуту вспомним, как это делается при помощи абсолютного позиционирования. У нас есть три слоя:
Это можно сделать разными способами. Если изображение исключительно декоративное, то подходит background-image . В противном случае можно воспользоваться ![]()
:
Вот так hero реализуется при помощи абсолютного позиционирования. Но можно сделать лучше.
Прежде всего добавим к hero свойство display: grid . И применим тот же принцип, что в компоненте карточки, то есть пропишем grid-area: 1/-1 в каждом прямом потомке элемента hero .
К сожалению, чтобы .hero__thumb работал, высоту hero придётся фиксировать. Если потомок элемента имеет свойство height: 100% , то его родитель должен иметь явное фиксированное свойство height , а не min-height .
Пройду по отмеченным строкам, они важны:
Мы можем использовать z-index для элементов grid или flex. При этом нет необходимости добавлять position: relative .
Поскольку .hero__content — элемент grid, свойство margin: auto центрирует его по горизонтали и вертикали.
Не забудьте включить object-fit: cover при работе с изображениями.
Я использовал min-height: 0 для изображения на случай, если оно окажется большим. Это нужно, чтобы заставить grid соблюдать height: 100% и не делать изображение больше, чем секция hero, когда используется огромное изображение. Подробнее об этом читайте в статье о минимальном размере контента в CSS grid.
Заметили, что решение стало намного чище?
CSS display: contents
Я думаю, что это первый реальный случай использования display: contents , который был полезен. В примере ниже у нас есть содержимое и изображение.
Вот HTML-код примера:
До сих пор ничего странного. На мобильных устройствах хочется добиться такого расположения:
Обратите внимание: изображение теперь расположено между заголовком и описанием. Как решить эту проблему? Можно подумать, что разметку нужно изменить так:
Этот код может работать согласно ожиданиям, а на десктопе нужно расположить ![]()
справа. Он работает, но есть решение с display: contents и оно проще. Чтобы показать его, вернёмся к исходной разметке:
Обратите внимание: содержимое обёрнуто внутри .hero__content . Как сообщить браузеру о нашем желании, чтобы ,
и стали прямыми потомками ![]()
? При помощи display: contents :
Элемент .hero__content теперь — скрытый призрак. Браузер будет парсить разметку вот так:
И вот всё, что нам нужно сделать в CSS:
При правильном применении display: contents — это мощная техника, позволяющая добиться того, что ещё несколько лет назад было невозможно. Конечно, мы хотим так же обращаться со стилями десктопа:
Упорядочиваем элементы компонента карточки
Ниже код варианта карточки, где заголовок размещается в её верхней части. Посмотрим на HTML:
Обратите внимание: у нас есть два прямых потомка card : изображение thumb.jpg и div с классом card__content . Как с такой разметкой расположить заголовок вверху? Это можно сделать с помощью абсолютного позиционирования:
Однако это решение может не работать, когда заголовок слишком длинный.
Это происходит потому, что заголовок находится вне обычного потока, а значит, браузеру не важна его длина. При помощи display: contents можно добиться большего:
Это позволяет контролировать все дочерние элементы, при необходимости гибко настраивая их порядок свойством order .
Есть небольшая проблема: мы добавили padding: 1rem к родительскому элементу, поэтому изображение должно прилипать к краям. Вот как исправить ситуацию:
Центрирование
Можно встретить много шуток о том, что центрирование — это сложно. Но в наши дни центрировать элемент проще, чем когда-либо. Больше не нужно использовать position: absolute с transform . К примеру, для центрирования flex-элемента по горизонтали и по вертикали можно воспользоваться margin: auto :
Я написал полное руководство по центрированию в CSS.
Соотношение сторон изображения
Новое свойство CSS aspect-ratio сегодня поддерживается во всех основных браузерах. Чтобы заставить бокс соблюдать определённое соотношение сторон, раньше мы использовали этот хак с padding :
С aspect-ratio соблюдать соотношения проще:
Иногда лучше position: absolute
В этом примере содержимое (аватар, имя и ссылка) перекрывается обложкой карточки. У нас есть два варианта:
position: absolute для обложки карточки;
отрицательный margin для содержимого.
Посмотрим на два других решения. Какое из них больше подходит для нашего случая?
Использование абсолютного позиционирования
Так мы можем позиционировать прямоугольник абсолютно, а затем добавить padding: 1rem к содержимому карточки:
Таким образом, когда обложка карточки будет убрана, нам не придётся изменять CSS.
Использование отрицательного margin
В этом решении карточка не позиционируется абсолютно. Вместо этого содержимое имеет отрицательный margin от верха:
Хотя это решение работает, когда обложка у карточки есть, оно может вызвать проблему:
Обратите внимание, что аватар находится за пределами своего родителя (карточки). Чтобы исправить это, изменим CSS и уберём отрицательный margin :
Лучшим решением оказалось position: absolute . Здесь это свойство избавляет от лишнего CSS.
Дополнительные материалы
Райан Маллиган опубликовал отличную статью о позиционировании оверлейного контента с помощью CSS-grid.
Стефани Эклз написала замечательную статью об использовании CSS-grid для построения разделов hero.
Как убрать position absolute. Но что бы при это код работал как сейчас?
Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается пропорционально при уменьшении.
Absolute Software (Absolute Reminder) — что это за программа и для чего она?
Absolute Software (Absolute Reminder) — что это и для чего? У меня лицензионный Виндовс 8.
как задать свойство absolute position?
я удаляю запись из recordset и значение свойства становиться неопределенным — как его установить.
Сообщение от Andrews8888
Сообщение от Andrews8888
Сообщение от Andrews8888
Как сделать адаптивным контент с position absolute?
Добрый день, при absolute ,текст съезжает на нижнюю секцию, когда я масштабирую, как сделать, чтоб.
OffsetLeft при position — absolute
Камрады, HELLO. Что есть: div в нем span, который имеет значение left. Значение position для div.
Люди, подскажите как привязать position:absolute слоя к положению таблицы на странице.
Люди, подскажите как привязать position:absolute слоя к положению таблицы на странице. У меня.
Как расположить элемент справа, чтобы он ничего не задел(без position:absolute)?
Привет. Как расположить элемент справа я знаю, но вот как его расположить справа без.
Позиционирование CSS
Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре «Морской бой». Между кораблями должны быть пустые клеточки — margin.
Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и transform они как бы приподнимаются на уровень 2.
В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.
Статического позиционирование — position: static;
position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.
Относительное позиционирование — position: relative;
Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.
Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.
Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.
Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте — он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div (подробнее).
Полная аналогия со свойством transform:translate css
Для встроенных элементов
Встроенные элементы margin не смещает вниз и вверх (подробнее). Только top, bottom
или
Абсолютное и фиксированное позиционирование
Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.
Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.
Итоговая таблица
отличительные свойства
position: static;
position: relative;
transform: translate();
position: absolute;
position: fixed;
наложение
элементы лучше не помещать друг на друга
элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index
точка отсчёта top, right, bottom и left
игнорируются
исходное положение элемента
край родительского элемента
край окна браузера
элементы вокруг
учитывают текущее положение элемента
учитывают исходное положение элемента
игнорируют положение элемента
width: 100%; это ширина
элемента (для встроенного)/родительского элемента (для блочного)
родительского элемента с position не в значении static
окна браузера
при прокрутки страницы элемент
перемещается
«прилипает» к заданному месту окна браузера
А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.
Нижние в коде блоки показаны над верхними блоками, но не перекрывают их. [w3.org]
inline-элементы находятся над блочными элементами. И если в коде они ниже, то перекрывает блоки.
Плавающие элементы находятся над нижестоящими элементами (искл. inline-элементы).
Позиционирование элементов в CSS
Свойство position позволяет задавать расположение элементов. Для свойства position можно задать следующие значения:
Элементы, к которым применено свойство position можно позиционировать используя свойства:
- top — отступ сверху
- left — отступ слева
- right — оступ справа
- bottom — отступ снизу
Перечисленные свойства top, left, right, bottom не работают, пока к элементу не применено свойство position
Если свойства left и right противоречат друг другу, то сработает только left. Аналогично при top и bottom, которые противоречат друг другу, сработает только top.
position: static
HTML элементы позиционируются как static по умолчанию. Т.е. элементы выводятся в основном потоке — так, как записаны в коде HTML. Все элементы, которым не задано свойство position, позиционируются как static.
position: relative
Если к элементу применено свойство position: relative, то элемент не изменяет своей позиции. После применения свойств left, top, right, bottom, элемент смещается относительно своей первоначальной позиции на указанное значение. Данное смещение не влияет на остальные элементы.
position: fixed
Если к элементу применили свойство position: fixed, то он будет позиционироваться относительно окна браузера, и не будет изменять своего положения при прокрутке документа.
Свойство position: fixed часто применяется для фиксирования заголовков при прокрутке сайта, фиксирования кнопки Вверх или других подобных элементов.
position: absolute
При абсолютном позиционировании, элемент будет позиционироваться относительно ближайшего родителя, к которому применено любое свойство position, либо, если такого элемента нет, то относительно окна браузера.
Если к элементу применено свойство position: absolute, то оно отменяет свойство float.
Порядок наложения элементов с помощью z-index
При использовании позиционирования элементов, можно добиться их наложения. Однако, порядок наложения по умолчанию определяется тем, как элементы записаны в коде HTML. Так, первый элемент в коде HTML, будет при наложении изображен на заднем плане. Последний описанный элемент коде HTML будет изображен на переднем плане.
Изменить порядок наложения можно с помощью свойства CSS z-index. Так, если к двум элементам применен z-index, то тот элемент, у которого z-index больше, будет отображен на переднем плане.
Свойство z-index работает только с элементами, к которым применено свойство position.
Свойство z-index это просто число, без единиц измерения.
Иногда нужно выровнять блочный элемент по центру экрана так, чтобы даже при изменении ширины блок оставался по центру. Для этого используют свойство margin: 0 auto. Подробный пример можно посмотреть здесь.
Похожие публикации:
- Как растянуть background css
- Как растянуть меню на всю ширину css
- Как с помощью css задать красный цвет текста для элемента
- Как сдвинуть border css
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 имеет пять возможных значений:
- static (статическое позиционирование)
- relative (относительное)
- absolute (абсолютное)
- fixed (фиксированное)
- sticky (липкое)
Мы разберем все 5 значений, но сначала обратим внимание на свойства расположения.
Свойства расположения
Само по себе свойство position не слишком-то много и может. Чтобы указать, где именно в документе нужно расположить элемент, мы используем свойства расположения (это не официальное название, это я их так называю). Этих свойств четыре:
- top (верх)
- left (слева)
- right (справа)
- bottom (низ)
Значения этих свойств определяют, насколько позиция элемента должна сместиться и в каком направлении (вверх, вниз, влево, вправо). Чуть позже мы все это разберем на примерах.
Значения свойства position
Статическое позиционирование
static — это дефолтное значение свойства position . Оно предполагает, что элементы на странице отображаются в нормальном потоке. Свойства top , left , bottom и right не влияют на элемент, имеющий position: static .
Несмотря на то, что это дефолтное значение, оно может задаваться явно. Например, когда вам нужно перезаписать значение position , установленное где-то еще (и унаследованное вашим элементом).
Давайте рассмотрим пример. На нем мы увидим, что указание position: static никак не влияет на отображение элемента.
Здесь у нас три блока div , каждый из которых находится в родительском контейнере с классом box-original .
Давайте добавим position: static для div с классом box-2 и зададим также значения для свойств top и left .
.box-2
Как видите, несмотря на то, что мы задали свойства top и left , блок располагается в нормальном потоке.
Теперь вы знаете, что значение static является дефолтным для свойства position , а указание свойств расположения не сдвигает элементы, для которых указано position: static .
Относительное позиционирование
Относительное позиционирование означает, что элемент позиционируется относительно своей исходной позиции в нормальном потоке. Если просто задать элементу position: relative , ничего не произойдет. Для изменения позиции нужно задать свойства расположения.
В общем, если вы просто задаете элементу position: relative , он остается в нормальном потоке. Но при помощи свойств расположения вы можете его сдвинуть. Давайте рассмотрим пример.
Возьмем код из прошлого примера и заменим position: static на position: relative .
.box-2
Фиолетовый квадрат сдвинулся со своей нормальной позиции (обозначена серым квадратом). В этом примере задано смещение на 10px от верха и от левого края этого же элемента в дефолтном положении (т. е. смещение вниз и вправо).
Элемент при этом остается в нормальном потоке документа, а сдвиг происходит относительно его исходной позиции. Запомните это: пригодится, когда мы будем разбирать следующие значения.
Абсолютное позиционирование
При абсолютном позиционировании элементы изымаются из нормального потока документа, а пространство, которое они занимали, больше не резервируется за ними. То есть их как бы вообще здесь нет.
Когда элементу задано позиционирование position: absolute , все остальные элементы ведут себя так, будто этого элемента вообще больше нет в документе. Поэтому для этого элемента не резервируется место поточной раскладке. Абсолютное позиционирование — мощный инструмент в деле перемещения элементов.
Когда я изучал это свойство, от меня кое-что ускользало, так что я считаю необходимым заострить ваше внимание. Элемент со свойством position: absolute позиционируется относительно своего ближайшего позиционированного предка. Это означает, что для того, чтобы абсолютное позиционирование сработало, родительский элемент должен иметь заданное значение свойства position , причем не static .
Это очень важный момент. Если ближайший родительский элемент не имеет указанного свойства position , элемент с абсолютным позиционированием будет позиционироваться относительно следующего в иерархии родительского элемента, имеющего это свойство. Если у элемента вообще не будет позиционированных предков, он будет позиционироваться относительно элемента html или viewport. Не зная этого, можно долго ломать голову, почему все работает не так, как задумано.
Элемент с абсолютным позиционированием можно перемещать как угодно. При помощи свойств top , left , bottom и right вы можете определить, где должен находиться этот элемент относительно его позиционированного предка (первого в иерархии среди имеющих значение position , отличное от static ).
Вернемся к нашему примеру. Изменим свойство position второго блочного элемента на position: absolute . Прежде чем рассматривать результат, вернитесь к предыдущему пену и обратите внимание на позиционирование элемента parent-box .
.box-2
Вы видите, что в документе не создалось пустого места для нашего элемента. Фактически это место схлопнулось, и другие элементы ведут себя так, будто на этом месте вообще ничего никогда не было. Так происходит потому, что наш элемент теперь позиционируется относительно элемента parent-box .
Фиксированное позиционирование
Фиксированное позиционирование работает подобно абсолютному. Оно удаляет элемент из нормального потока документа, причем под этот элемент в раскладке больше не отводится никакого места.
Элементы с фиксированным позиционированием позиционируются относительно viewport. (Viewport — это видимая пользователю область веб-страницы, то, что может увидеть пользователь, не прибегая к прокрутке, — MDN).
Это означает, что когда вы прокручиваете страницу, элемент остается на прежнем месте. Это часто используется при создании навигации на сайте: меню и т. п. блоки должны оставаться на месте, как бы пользователь ни прокручивал контент. Они остаются видимыми и доступными, например, вверху страницы.
Давайте изменим позиционирование box-2 с position: absolute на position: fixed . Также мы изменим значение свойства top на 0 и удалим значение свойства left . Еще мы добавим несколько дополнительных блоков, чтобы увидеть эффект при прокрутке.
.box-2
Как видите, фиолетовый блок теперь зафиксирован вверху страницы. Мы добились такого эффекта, установив для него 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-разметке не имеет значения, мы можем сменить их позицию с передней на заднюю.
z-index:4 z-index:1 z-index:2 z-index:5 z-index:3
Мы зададим каждому классу 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 — поиграться с ним. Возьмите пены, приведенные здесь в качестве примеров, попробуйте поменять в них какие-нибудь значения и посмотрите, к чему это приведет.
Предыдущая запись