position html что это
position
Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Типы позиционирования
За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):
Синтаксис
Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.
Значения
Формальный синтаксис
Примеры
Относительное позиционирование
Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.
Абсолютное позиционирование
Фиксированное позиционирование
Липкое позиционирование
Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например.
. позиционирует элемент с id «one» относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.
Типичный верстальщик
Позиционирование элементов: разбор всех значений position в CSS
Всем привет, меня зовут Анна Блок, и эта статья будет посвящена довольно «острой» теме, которая связана с позиционированием элементов. Мы поговорим о таком свойстве как position и его значениях: relative, absolute и fixed. Также мы поговорим о таком значении как static, но по большей степени нас будет интересовать именно первая «троица», так как она чаще всего используется на сайтах.
Если ты постоянно задаешься вопросом, какое значение и в какой ситуации нужно использовать, то эта статья для тебя. Разбор начнём с теории и после на практике отражу примеры на сайте Codepen.
Position
Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.
Relative
Это относительное позиционирование. В данном случае положение элементов устанавливается относительно его исходного места, при этом если мы добавим такие свойства как: left, top, right и bottom, то мы изменим позицию элемента и сдвинем его в ту или иную сторону в зависимости от значений.
Absolute
Static
Это статичное позиционирование. В этом случае элементы отображаются, как обычно. Использование таких свойств как: left, top, right и bottom не приводит ни каким результатам.
Fixed
Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.
Sticky
Стоит отметить, что свойство position поддерживается браузерами уже довольно давно, но на тот момент поддерживалась только три свойства: static, relative и absolute и уже начиная с IE 7, появилась поддержка fixed. Но при этом относительно новое значение sticky не поддерживается Internet Explorer-ом совсем и относительная поддержка у Edge начинается только с шестнадцатой версии. Во всех остальных браузерах такое свойство, как position поддерживается без проблем.
Практика
Теперь давайте перейдем к практике, и я покажу, как на деле работают эти свойства. В HTML зададим блок под названием box и внутри него установим элемент под названием item.
Для box мы визуально зададим пространство, задав ему ширину и высоту, добавив обводку.
Далее мы стилизуем item. Также установим для него ширину, высоту, цвет фона и скругление уголов блока.
Итак, именно с этим примером мы сейчас будем работать и рассмотрим, как будут вести себя элементы при разных значения position.
Absolute
Давайте предположим, что нам необходимо разместить круг в том же месте, как это отображено на картинке. Как это сделать? Если вспомнить теорию, то там было сказано, что такое свойство, как position: absolute задает абсолютное позиционирование для элемента, поэтому давайте так и поступим.
Элементу item добавим position: absolute. Однако для того, что бы наш position работал, нам необходимо начать работу в связке с такими свойствами, как: left, top, right и bottom. В зависимости положения объекта, мы будем использовать то или иное свойство. В нашем случае нам нужно разместить его относительно правой и нижней сторон квадрата.
И тут мы видим первую проблему, с которой сталкиваются новички — круг вышел за приделы блока box. Вы должны помнить, что если вы в CSS не указали, какой блок является родителем (относительно какого блока должен позиционироваться элемент), то он позиционирует дочерний элемент относительно всего тега body. Решается эта проблема добавлением свойства relative для блока box.
После того, как мы это сделали, наша точка вернулась на необходимое место.
Ознакомиться подробнее с HTML и CSS можно тут:
Fixed
Добавим в блок box текста, что создать автоматический скролл на странице.
Теперь наша задача сделать так, что бы наша точка «преследовала» нас, и все время находилась в одной части экрана, как на картинке.
И теперь в момент, когда мы скролим страницу эта точка «идет» за нами, она зафиксировалась в одной части экрана.
Ознакомиться подробнее с HTML и CSS можно тут:
Ознакомиться подробнее с HTML и CSS можно тут:
Sticky
Итак, теперь давайте рассмотрим четвертый пример. В нем мы создадим блок header, внутри которого содержится текст. Рядом создадим блок main, внутри которого размести блок side с текстом, что бы на странице появился скрол и блок sticky с заголовком. Под блоком main разместим еще один блок и назовем его footer с добавлением текста.
Таким образом, у нас получилась чистая разметка HTML. Ее мы и будем стилизовать. Начнем с блока side, установив ему ширину.
Далее стилизуем заголовок, задав ему цвет текста и цвет фона.
Теперь при скроле заголовок цепляется к верху и продолжает «идти» за нами по мере следования по странице.
Ознакомиться подробнее с HTML и CSS можно тут:
Вместо заключения
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.
Свойство 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 должно превосходить все другие элементы управления, чтобы они перекрывались.
position в CSS
Свойство position — это универсальное и мощное свойство. Оно позволяет установить или изменить положение элемента и содержит четыре возможных значения:
Часто используется наряду с четырьмя свойствами координат:
static
relative
Когда position установлено относительно, элемент может перемещаться относительно его текущей позиции.
Давайте переместим второй абзац:
Красный абзац переместился на 20px слева направо и на 10px сверху вниз относительно его естественного положения, где он полагался быть.
Обратите внимание, что синие абзацы не сдвинулись вообще. При использовании относительного позиционирования, красный абзац может свободно перемещаться, не нарушая макет. Единственное, что сдвигается со своего места, так это сам элемент. Все остальные элементы не знают, что элемент переместился.
absolute
Когда position устанавливается абсолютно, элемент может перемещаться относительно первого позиционированного предка.
Позиционированного? Что такое позиционированный элемент?
Характеристикой позиционированного элемента является то, что он может выступать в качестве точки отсчёта для своих дочерних элементов.
Давайте представим простую иерархию:
Если ширина установлена, то значение right отбрасывается.
fixed
Единственное отличие состоит в том, что точкой отсчёта является окно просмотра. Это означает, что фиксированный элемент не перемещается со страницей, он фиксируется на экране.
Позиционирование
Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения position и как их использовать.
| Необходимые знания: | |
|---|---|
| Задача: | Изучить как работает CSS позиционирование. |
Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию 0_basic-flow.html из нашего GitHub репозитория (исходный код здесь) и используйте его как отправную точку.
Введение в позиционирование
Статическое позиционирование
Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит «поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения».
Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте class positioned ко второму
А теперь добавьте следующее правило в конец вашего CSS:
И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!
Примечание: вы можете посмотреть живой пример на данном этапе на 1_static-positioning.html (см. исходный код).
Относительное позиционирование
Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление position в вашем коде:
Введение в top, bottom, left, и right
Примечание: значения этих свойств могут принимать любые единицы которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.
Если вы сейчас сохраните и обновите, вы получите примерно такой результат:
Примечание: вы можете посмотреть пример на этом этапе на 2_relative-positioning.html (см. исходный код).
Абсолютное позиционирование
Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:
Если вы сохраните и обновите, то вы должны увидеть нечто подобное:
В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; ф ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее.
Примечание: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.
Примечание: вы можете посмотреть пример на этом этапе на 3_absolute-positioning.html (см. исходный код).
Контекст позиционирования
Какой элемент является «содержащим» относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).
Позиционируемый элемент вложен в в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body :
Это должно дать следующий результат:
Примечание: вы можете посмотреть живой пример на этом этапе на 4_positioning-context.html (см. исходный код).
Введение в z-index
Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:
Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:
Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:
Обратите внимание что z-index принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.
Примечание: вы можете посмотреть живой пример на этом этапе на 5_z-index.html (см. исходный код).
Фиксированное позиционированиее
А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:
Теперь мы собираемся дать элементу
top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.
Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:
Теперь вы должны видеть законченный пример:
Примечание: вы можете посмотреть живой пример на этом этапе на 6_fixed-positioning.html (см. исходный код).
position: sticky
Липкие элементы являются «липкими» относительно ближайшего предка с «прокручивающимся механизмом», который определяется свойством позиции его предка.
Примечание: вы можете посмотреть живой пример на этом этапе на 7_sticky-positioning.html (см. исходный код).
Проверь свои навыки!
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Проверьте свои навыки: Позиционирование.
Заключение
Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.