Главная » Ростелеком » Позиционирование элементов. Position Relative - что это? Подробное описание

Позиционирование элементов. Position Relative - что это? Подробное описание

Здравствуйте, уважаемые читатели блога сайт! Настало время дополнить новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования position с различными параметрами (static, relative, absolute, fixed).

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

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

Определение позиции элемента и нормальное позиционирование (position static)

Для свойства position существует четыре значения (static | relative | absolute | fixed) , которые и определяют способ позиционирования. Как вы, наверное, знаете, параметры практически всех CSS правил можно почерпнуть с официальной странички спецификации W3 , где представлен полный набор свойств и их значений, в том числе position:

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

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

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

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

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

Position absolute (абсолютное позиционирование)

Итак, продолжим разбор технических нюансов абсолютным позиционированием, которое определяется параметром absolute свойства position:

Position: absolute

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

Здесь A, B, C и D - числовые величины отступов. Теперь разберем особенности значения absolute на конкретном примере. Возьмем 2 с соответствующими , которым пропишем параметры (цвет фона), width (ширину) и height (высоту). Для простоты воспользуемся , который реализуется при помощи атрибута style.

В отличие от связанных стилей, являющихся на практике наиболее оптимальными, этот метод предусматривает размещение правил CSS не в отдельном файлике, а в виде значений атрибута STYLE, приписываемых нужному тегу. При этом для чистоты эксперимента пока position absolute добавлять не будем:

Позиционирование элементов HTML

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

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

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

А в этом случае после применения к нему параметра absolute вебэлемент остается на месте, в то время как его сосед (в нашем примере нижний подкрашенный блок) перемещается вверх. В результате осуществляется наложение одного элемента на другой. Попробуем теперь указать отступ слева для абсолютно позиционированного вебэлемента left:0, в результате получаем вот что:

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

Причем необходимо отметить, что left имеет преимущество перед right, а top перед bottom. Если они входят в конфликт друг с другом, то значения соответственно right и bottom игнорируются. Идем далее. Следующим шагом пропишем положительное значение для left верхнего контейнера:

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

Если размеры блока не указаны явно посредством width и height, то они будут соответствовать размерам контента, включая значения границ и отступов;
Вебэлемент не будет менять свое место, если у него не прописаны значения left, right, top или bottom;
Как уже было сказано, left имеет более высокий приоритет перед right, а top перед bottom;
Если элементу присвоить отрицательное значение left или top, то блок уйдет за границы области просмотра. При этом полоса прокрутки не появится. Этот нюанс можно использовать для удаления вебэлемента из зоны видимости;
В случае, если left указывается значение, превышающее ширину области просмотра или для right определяется отрицательная величина, то появляется горизонтальная прокрутка. Это же самое касается пары top и bottom;
Ширина блока с абсолютным позиционированием формируется с помощью left и right, однако, только тогда, когда width не указано. Аналогично происходит формирование высоты элемента при помощи top, bottom и height;
Вэбэлемент с параметром absolute перемещается одновременно со страницей при ее прокрутке

Думаю, я все разложил по полочкам что касается абсолютного позиционирования и вы можете сами определить, какое практическое применение может быть у элементов с таким свойством. Впрочем, в виде информации скажу, что при помощи свойства position со значением absolute можно создать блоки с фреймами, добавив правило overflow с параметром auto. Также существует возможность получить всплывающие подсказки для фото или изображений.

Position relative (относительное позиционирование)

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

Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:

Текст...

Выглядеть это будет так:

Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:

Текст...

В итоге результирующий вид будет таким:

Как видите, произошло смещение блока по заданным параметрам. Однако, соседний элемент не отреагировал на это и текст по-прежнему обтекает перемещенный контейнер как если бы тот оставался на своем прежнем месте.

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

Совместное использование position absolute и relative

Теперь рассмотрим, какой результат может дать использование в связке двух видов позиционирования. Ежели родительскому элементу присвоить значение relative, а дочернему absolute, то осуществится замена системы координат и местоположение дочернего вэбэлемента будет определяться относительно его родителя:

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

Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:

Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:

Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.

Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:

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

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

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

Ну и последний параметр свойства position помогает фиксировать нужные вебэлементы на странице. В принципе этот вид позиционирования очень похож на абсолютное с той лишь разницей, что элемент с прописанным значением fixed привязан к определенной области на экране в окне браузера посредством left, right, top, bottom. Он остается на месте даже при прокрутке страницы.

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

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

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

position

Свойство CSS position используется для указания способа позиционирования HTML-элемента на странице. Само изменение позиции элемента осуществляется с помощью свойств top , right , bottom и left .

Тип свойства

Назначение: позиционирование .

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS position является одно из ключевых слов задающих способ позиционирования.

static - обычное расположение элемента на странице, с учетом его типа (блочный, встроенный и т.д.) и элементов окружающих его.
relative - относительное позиционирование. Сначала браузер устанавливает элемент, как при обычном расположении, а потом смещает его относительно данного места. При этом остальные HTML-элементы ведут себя так, будто элемент никуда не перемещался, то есть место, где он находился до смещения, остается незанятым, а на новом месте они его «не видят».
absolute - абсолютное позиционирование. Позиционирование элемента происходит относительно его ближайшего предка, у которого значение свойства position не равно static (то есть position присутствует сразу у двух элементов). Если же такого предка нет, то элемент позиционируется относительно окна браузера. При этом окружающие HTML-элементы ведут себя так, будто абсолютно позиционируемого элемента вообще нет на странице, то есть форматирование происходит без его участия.
fixed - тоже абсолютное позиционирование. Почти такое же, как и absolute , только здесь элемент вообще не может позиционироваться относительно какого-либо элемента‑предка, а только относительно окна браузера, поэтому свойство position используется только для самого элемента. Вдобавок при прокрутке (скроллинге) элемент не меняет своего местоположения в окне.
inherit - наследует значение свойства CSS position от родительского элемента.

Как вы знаете, обычным втроенным (inline) элементам нельзя явно задать высоту (CSS ) или ширину (CSS ). Однако, если к встроенному элементу применяется позиционирование со значением absolute или fixed , то размеры у него становятся изменяемые. Помните об этой особенности, часто она очень помогает.

Процентная запись: не существует.

Значение по умолчанию: static.

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

Естественно при позиционировании вовсе не обязательно использовать свойства CSS top , right , bottom или left , чтобы изменить положение элемента. Да, при относительном позиционировании это не даст особого эффекта - элемент будет вырван из прямого потока, но его место все-равно никто не сможет занять. А вот при абсолютном, элемент будет не только «вырван» из контекста HTML-страницы, но и нижестоящие элементы займут его место. Причем при position: fixed он еще и будет оставаться на одном месте при скроллинге.

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

Синтаксис

position: static | relative | absolute | fixed | inherit

Пример CSS: использование position

seodon.ru - CSS свойство position

Этот блок DIV2 абсолютно позиционирован относительно окна браузера и будет зафиксирован при скроллинге.

Этот DIV3 тоже зафиксирован, но вы его вообще не увидите, так как задано очень большое смещение и он будет всегда находиться в 20500px от верха окна.

Обычный блок DIV4.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit , IE 6.0 еще не понимает и fixed .

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

Позиционирование и свободное перемещение элементов

1. Типы позиционирования

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

position
Значение:
static	Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе. Используется для очистки любого другого значения позиционирования.
relative	Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице. Если для относительно позиционированного элемента одновременно задать свойства top и bottom или left и right , то в первом случае сработает только top , во втором — left . Относительное позиционирование позволяет задавать z-index для элемента, а также абсолютно позиционировать дочерние элементы внутри блока.
absolute	Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static . Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block; .
fixed	Фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

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

2. Свойства смещения

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

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

3. Позиционирование внутри элемента

Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.

.wrap { padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; } .white { position: absolute; width: 200px; top: 10px; left: 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22; }

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

4. Проблемы позиционирования

1. Если ширине или высоте абсолютно позиционированного элемента присвоено значение auto , то её значение будет определяться шириной или высотой содержимого элемента. Если ширина или высота объявлена явно, то именно это значение и будет присвоено.
2. Если внутри блока с position: absolute расположены элементы, для которых задано обтекание float , то высота этого элемента будет равна высоте самого высокого из этих элементов.
3. Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float , а для элемента с position: relative — можно.
4. Если предок позиционированного элемента является блочным элементом, то блок-контейнер формируется областью содержимого, ограниченной рамкой (border). Если предок — строковый элемент, блок-контейнер формируется внешней границей его содержимого. Если предка нет, блоком-контейнером является элемент body .

5. Свободное перемещение элементов

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

Рис. 3. Свободное перемещение элементов

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

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

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .

Свойство не оказывает никакого влияния на элементы с display: flex и display: inline-flex .

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

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

6. Отмена обтекания элементов

6.1. Свойство clear

Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обоих сторон элемента, установленное свойством float . Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;} .

6.2. Очистка потока стилями при помощи класса clearfix и псевдокласса:after

Предположим, имеется блок-контейнер, для которого не заданы ширина и высота. Внутри него помещен плавающий блок с заданными размерами.

.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; }

Рис. 4. «Эффект схлопывания» блока-контейнера

Решение проблемы:
Создаем класс.clearfix и в сочетании с псевдоклассом:after применяем его к блоку-контейнеру.

Второй вариант очистки потока:

Clearfix:after { content: ""; display: table; clear: both; }
Рис. 5. Применение «очищающего» метода для блока-контейнера, содержащего плавающий элемент

6.3. Легкий способ очистки потока

Существует ещё один прием очистки потока для элемента, содержащего плавающие элементы, например, для маркированного горизонтального списка:

Ul { margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; } li { float: left; width: calc(100% / 3 - 20px); height: 50px; margin-right: 20px; background: #ffffff; border: 3px dashed #666666; } li:last-child {margin-right: 0;} Рис. 6. Очистка потока горизонтального списка

Позиционирование задаётся с помощью свойства position . Свойство может иметь четыре значения, которые мы и рассмотрим.

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

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

Position: absolute

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

Теперь его можно перемещать с помощью свойств left , right , top и bottom . По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative , то смещение происходит относительно родительского блока.

Block{ position: absolute; bottom: 0; right: 0; background: gray; }

Элемент с классом block будет сдвинут в нижний правый угол браузера.

Рассмотрим пример, когда блок находится внутри родительского элемента.

Блок внутри родительского элемента

Мы сначала родительскому контейнеру записали относительное позиционирование (relative ), а для элемента block задали абсолютное. В результате отсчет координат будет происходить не от самого окна браузера, а от краев элемента родителя, то есть блока wrapper .

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

Относительное позиционирование записывается так – position: relative . Координаты задаются такими же свойствами, как и при абсолютном позиционировании. Единственное существенное отличие заключается в том, что элемент формально не выпадает из потока – под него остается место.

Работу этого значения можно сравнить с visibility: hidden , когда элемент скрывается со страницы, но место под него остается нетронутым. Блок можно двигать куда угодно, но место под него остается пустым и его не займут другие части. Сдвинуть блок можно с помощью свойств top , left и так далее.

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

Стандартный блок

Блок подвинется на 50 пикселей вправо и на 10 вверх. Но его место осталось нетронутым.

Стандартный блок

Как видите, можно задавать и отрицательные значения.

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

Распространённый вариант, когда при прокрутке элемент словно приклеивался к одному месту. Например, часто используется в шапке сайта. В основном это реализуется с помощью фиксированного позиционирования. Для этого нужно записать:

Block{ position: fixed; }

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

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

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

Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position , left , top , right и bottom . Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left , top , right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.

Позиционирование по умолчанию (static)

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

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

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

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

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