Как отменить абсолютное позиционирование css

Как переопределить положение: абсолют в CSS?

6 ответов

position: relative; больше всего достигнет того, что вам нужно.

То, что вы установите вместо этого, зависит от того, как вы хотите отобразить его. Есть 4 возможных значения (включая абсолютное, которое вы пытаетесь переопределить).

position: static; Элемент с положением: статический; не позиционируется каким-либо особым образом; он всегда располагается в соответствии с обычным потоком страницы. Это по умолчанию.

position: relative; Элемент с положением: относительный; позиционируется относительно своего нормального положения. Установка свойств top, right, bottom и left относительно позиционированного элемента приведет к его отклонению от его нормального положения. Другое содержимое не будет откорректировано, чтобы вписаться в любой пробел, оставленный элементом.

position: fixed; Элемент с положением: исправлено; расположен относительно области просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.

position: absolute; Элемент с позицией: absolute; позиционируется относительно ближайшего расположенного предка (вместо позиционированного относительно окна просмотра, как фиксированный).

Значением по умолчанию position является position: static так что это, вероятно, будет работать:

Вы всегда можете использовать inline-css с! Важным. Это переопределит любые другие стили, так как приоритет будет первым.

Источник

Свойство position

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

position: static

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

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

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

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

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

position: relative

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

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

Координаты

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

position: absolute

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

position: fixed

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

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

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

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

Итого

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

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

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

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

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

Почитать

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

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

Задачи

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

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

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

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

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

Источник

2.4. CSS-позиционирование

CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).

В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:

Схемы позиционирования

В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:

Нормальный поток

Обтекание

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

Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.

1. Содержащий блок

2. Выбор схемы позиционирования: свойство position

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

Свойство не наследуется.

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

Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.

Отступы margin абсолютно позиционированных блоков не схлопываются.

Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.stickyПоложение блока рассчитывается в соответствии с нормальным потоком. Затем блок смещается относительно своего ближайшего предка с прокруткой или окна просмотра, если ни у одного из предков нет прокрутки.

«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.

«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.

«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.fixedФиксированное позиционирование аналогично абсолютному позиционированию, с отличием в том, что для содержащим блоком устанавливается окно просмотра. Такой блок полностью удаляется из потока документа и не имеет позиции относительно какой-либо части документа. Фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения.

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

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

3. Смещение блока: свойства top, right, bottom, left

Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).

Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.

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

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

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

4. Обтекание: свойство float

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

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

Свойство не наследуется.

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

Рис. 2. Обтекание элементов

5. Управление потоком рядом с плавающими элементами: свойство clear

Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.

Свойство не наследуется.

Для предотвращения отображение фона или границ под плавающими элементами используется правило .

6. Определение контекста наложения: свойство z-index

В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.

Рис. 3. Положение элементов вдоль оси Z

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

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

Свойство не наследуется.

6.1. Контекст наложения

Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:

Источник

Как избавиться от position: absolute в CSS

Пару месяцев назад автора этого материала спросили о проблеме, которая возникла именно из-за этой строки CSS. В решении свойства position не оказалось вообще.

Пока у нас стартует новый поток курса по фронтенду, рассказываем о случаях, когда position: absolute вполне заменим современным CSS.

Введение

Вернёмся на 5 лет назад. Тогда CSS flexbox был новинкой и не мог работать на 100 %, а CSS grid не поддерживался. Мы работали с позиционированием CSS. Но сегодня проблемы тех лет решаются при помощи CSS flexbox или grid.

Наложение карточек

Когда у нас есть карточка, содержащая текст поверх изображения, мы часто используем position: absolute для размещения содержимого поверх изображения. Это больше не нужно при использовании CSS grid.

Вот типичная карточка с текстом над изображением:

Нет ничего плохого в position: absolute из примера выше, но почему не написать проще? Первый шаг — добавить display: grid к компоненту card. Задавать столбцы или строки не нужно:

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

А лучше воспользоваться сокращением grid-area :

Метка карточки (must try)

Чтобы исправить проблему заполнения, нам нужно указать метке выравнивание по началу контейнера:

Познакомьтесь с меткой, которая позиционируется над своим родителем без position: absolute :

Раздел Hero

Ещё один идеальный вариант — раздел hero с контентом, который перекрывает изображение.

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

Вот так hero реализуется при помощи абсолютного позиционирования. Но можно сделать лучше.

Пройду по отмеченным строкам, они важны:

Не забудьте включить object-fit: cover при работе с изображениями.

Я использовал min-height: 0 для изображения на случай, если оно окажется большим. Это нужно, чтобы заставить grid соблюдать height: 100% и не делать изображение больше, чем секция hero, когда используется огромное изображение. Подробнее об этом читайте в статье о минимальном размере контента в CSS grid.

Заметили, что решение стало намного чище?

CSS display: contents

Вот HTML-код примера:

До сих пор ничего странного. На мобильных устройствах хочется добиться такого расположения:

Обратите внимание: изображение теперь расположено между заголовком и описанием. Как решить эту проблему? Можно подумать, что разметку нужно изменить так:

Этот код может работать согласно ожиданиям, а на десктопе нужно расположить справа. Он работает, но есть решение с display: contents и оно проще. Чтобы показать его, вернёмся к исходной разметке:

И вот всё, что нам нужно сделать в CSS:

При правильном применении display: contents — это мощная техника, позволяющая добиться того, что ещё несколько лет назад было невозможно. Конечно, мы хотим так же обращаться со стилями десктопа:

Упорядочиваем элементы компонента карточки

Ниже код варианта карточки, где заголовок размещается в её верхней части. Посмотрим на HTML:

вверху? Это можно сделать с помощью абсолютного позиционирования:

Однако это решение может не работать, когда заголовок слишком длинный.

Это происходит потому, что заголовок находится вне обычного потока, а значит, браузеру не важна его длина. При помощи display: contents можно добиться большего:

Есть небольшая проблема: мы добавили padding: 1rem к родительскому элементу, поэтому изображение должно прилипать к краям. Вот как исправить ситуацию:

Центрирование

Я написал полное руководство по центрированию в CSS.

Соотношение сторон изображения

Новое свойство CSS aspect-ratio сегодня поддерживается во всех основных браузерах. Чтобы заставить бокс соблюдать определённое соотношение сторон, раньше мы использовали этот хак с padding :

С aspect-ratio соблюдать соотношения проще:

Иногда лучше position: absolute

В этом примере содержимое (аватар, имя и ссылка) перекрывается обложкой карточки. У нас есть два варианта:

position: absolute для обложки карточки;

отрицательный margin для содержимого.

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

Использование абсолютного позиционирования

Так мы можем позиционировать прямоугольник абсолютно, а затем добавить padding: 1rem к содержимому карточки:

Таким образом, когда обложка карточки будет убрана, нам не придётся изменять CSS.

Использование отрицательного margin

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

Хотя это решение работает, когда обложка у карточки есть, оно может вызвать проблему:

Обратите внимание, что аватар находится за пределами своего родителя (карточки). Чтобы исправить это, изменим CSS и уберём отрицательный margin :

Дополнительные материалы

Райан Маллиган опубликовал отличную статью о позиционировании оверлейного контента с помощью CSS-grid.

Стефани Эклз написала замечательную статью об использовании CSS-grid для построения разделов hero.

Разобраться в современном CSS вы сможете на наших курсах:

Другие профессии и курсы

Data Science и Machine Learning

Источник