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


Содержание

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Всем привет, меня зовут Анна Блок, и эта статья будет посвящена довольно «острой» теме, которая связана с позиционированием элементов. Мы поговорим о таком свойстве как position и его значениях: relative, absolute и fixed. Также мы поговорим о таком значении как static, но по большей степени нас будет интересовать именно первая «троица», так как она чаще всего используется на сайтах.

Если ты постоянно задаешься вопросом, какое значение и в какой ситуации нужно использовать, то эта статья для тебя. Разбор начнём с теории и после на практике отражу примеры на сайте Codepen.

Position

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.

Relative

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

Absolute

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

Static

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

Fixed

Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.

Sticky

Это сочетание относительного и фиксированного позиционирования. Когда мы пишем position: 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 текста, что создать автоматический скролл на странице.

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

Для этого блоку item задаем position: fixed и мы видим, что она как бы «выпадает» из потока и по умолчанию ей присваиваются такие свойства, как top: 0 и left: 0 . Но при этом, конечно же, мы их всегда можем сбросить, если укажем конкретные значения

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

Ознакомиться подробнее с HTML и CSS можно тут:

Static
Я скопировала все стили, которые у нас применялись в первом примере и теперь мы поговорим о position: static . По умолчанию, если для элемента вы не устанавливаете position , то автоматически у него подразумевается такое значение, как position: static . Давайте представим, что в какой-то момент вам предстоит заняться адаптивом сайта. Вероятнее всего, вам потребуется менять ширину у блока box.

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

И как мы видим, он игнорирует все, что мы писали ранее, это right и bottom. Даже, если мы изменим значения, сделаем их больше или меньше это никак не повлияет на расположение данного элемента, так как position: static сбрасывает все это. Поэтому, если в какой-то момент вам необходимо сбросить стили, то помните, что достаточно прописать только position: static и в таком случае right , bottom , left , top менять в @media не потребуется.

Ознакомиться подробнее с HTML и CSS можно тут:

Sticky
Итак, теперь давайте рассмотрим четвертый пример. В нем мы создадим блок header, внутри которого содержится текст. Рядом создадим блок main, внутри которого размести блок side с текстом, что бы на странице появился скрол и блок sticky с заголовком. Под блоком main разместим еще один блок и назовем его footer с добавлением текста.

Таким образом, у нас получилась чистая разметка HTML. Ее мы и будем стилизовать. Начнем с блока side, установив ему ширину.

Далее стилизуем заголовок, задав ему цвет текста и цвет фона.

Далее главному блоку sticky добавим position: sticky . Визуально пока у нас ничего не изменилось, но при этом, что бы он «выпал» из потока нужно работать в связке с float , поэтому добавляем ему float: right . Как мы видим, при скроле он у нас не цепляется наверх, поэтому чтобы это исправить необходимо дописать top: 0 и задать ширину.

Теперь при скроле заголовок цепляется к верху и продолжает «идти» за нами по мере следования по странице.

Ознакомиться подробнее с HTML и CSS можно тут:

Вместо заключения

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

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Изучаем CSS-позиционирование за 10 шагов

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float.

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

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

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

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

3. position: absolute

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

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

Фиксированное позиционирование (position: fixed), является подразделом абсолютного позиционирования. Единственное его отличие в том, что он всегда находится в видимой области экрана, и не двигается во время прокрутки страницы. В этом отношении, он немного похож на фиксированное фоновое изображение.


В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

6. Две колонки

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

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

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

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

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

8. Float

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

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

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

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

Илон Маск рекомендует:  Iis установка ssl на сервере

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

Или же назначить родительскому контейнеру свойство overflow: hidden

В любом случае, результат будет один и тот же.

Заключение

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

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

CSS — Позиционирование блочных элементов

Базовый поток документа

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

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .

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

В-третьих, положение элемента в потоке зависит от значения свойства display .

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

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

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

Кроме block , inline есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся position и float .

CSS-свойство position

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

Свойство position имеет 5 значений:

  • static (статичное позиционирование);
  • relative (относительное);
  • absolute (абсолютное);
  • fixed (фиксированное);
  • sticky (липкое).

static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

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

Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

Статичное позиционирование (static)

Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).

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

Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .

Пример выстраивания статично позиционированных элементов:

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

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .

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

Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :

Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :

Для сдвига элемента вправо или влево используется CSS свойство left или right :

Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :

Для сдвига по двум осям нужно использовать top или bottom , и left или right :

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .

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

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

Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .


Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.

Позиционирование выполняется относительно ближайшего позиционированного предка.

Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .

В этом примере позиционирование элемента #id-3 будет выполнять относительно #id-2 , т.к. он является позиционированным и является по отношению к нему более близким предком.

Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :

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

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

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .

CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).

Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .

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

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

Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .

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

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

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

Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.

  1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
  2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .
  3. Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.

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

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

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

Для 4-х последних значений свойства position (т.е.. всех, кроме static) можно назначить координаты с помощью свойств left — слева и right — справа (по горизонтали), а также top — сверху и bottom — снизу (по вертикали):

Также для всех позиций, кроме static , можно задать свойство z-index , которое определяется цифрой (0, -1, 10, 999) без указания единиц, т.к. это свойство показывает, на каком уровне (или слое) находится спозиционированный элемент по сравнению с другими позиционированными элементами (выше или ниже). Чем меньше цифра, тем ниже будет находится элемент среди себе подобных (т.е. тех элементов, у которых свойство position имеет значение relative, absolute, fixed или sticky. Для элементов с position: static свойства z-index или любая из координат (left, right, top, bottom) будут проигнорированы.

Элементы с position: relative

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

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

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

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

Элементы с position: absolute

При абсолютном позиционировании элемента без указания координат он будет привязан своим левым краем к левому краю родительского контейнера, но его ширина изменится: если текста мало — уменьшится, если текста (контента) много, то ширина блока увеличится, и он «вылезет» за пределы контейнера справа.

Как только этому элементу будут заданы координаты, он «сбежит» из родительского контейнера и разместится относительно body , заняв при этом все доступное пространство внутри body , если имеет приличное количество контента. Если контента мало (1-2 слова, например), то блок «примостится» сверху статического контента, не оставив и следа там, где был в первоначальной разметке.

Чтобы «вернуть беглеца» обратно в пределы родительского элемента, необходимо родителю задать свойство . position: relative , причем без указания каких-либо координат для него. В этом случае координаты дочернего элемента будут отсчитываться в пределах родительского контейнера, что, как правило, значительно удобнее.

В примере ниже вы можете посмотреть, как изменяется положение и вид блока, которому назначили свойство position: absolute . Для этого вам нужно будет нажать на соответствующую кнопку внизу примера. Обратите внимание, что элемент уменьшил свою ширину. Высота осталась примерно такой же за счет добавления кнопки вместо второго параграфа. Учтите, что первоначально для элемента с position: absolute ни одна координата не задана. Они добавятся только после того, как вы начнете перемещать ползунки. Кроме того, для абсолютно позиционированного элемента можно назначить все 4 координаты ( left, top, right, bottom ). Если их значения не будут противоречить друг другу, элемент . растянется. Нажмите на кнопку «Все координаты в 0» и посмотрите на ширину элемента. Она займет все доступное пространство внутри body или элемента-родителя. Кстати, кнопка «Вернуть в пределы родительского элемента» позволит вам посмотреть на разницу в расчете координат. В самом блоке есть кнопка «Убрать координаты», которая поможет в случае слишком большой растяжки элемента с position: absolute .

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

Элементы с position: fixed

Это фиксированные элементы, которые без указания координат «прилипают» к левому краю родительского блока и не смещаются при прокрутке страницы. Как только координаты заданы, элемент «открепляется» от родителя и позиционируется относительно окна просмотра, т.е. для нас это относительно body . Опять-таки он не смещается при прокрутке страницы, т.к. зафиксирован в определенных координатах.

В примере ниже вы можете назначить синему элементу свойство position: fixed , нажав на кнопку «Добавить синему блоку position: fixed». До тех пор, пока вы не начали изменять координаты этого элемента с помощью ползунков или цифр, он будет держаться в пределах родительского элемента. Но, как только вы задали две координаты, блок вырвется в координаты документа и не вернется внутрь родителя, даже, если вы назначите последнему position: relative . Это видно по изображению ниже.

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

В этом примере красная рамка ограничивает размеры body , синяя — размеры родительского элемента.

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

Илон Маск рекомендует:  Шаблоны HTML5

Элементы с position: sticky

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

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

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

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

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

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

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

Позиционирование HTML/CSS — виды?

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

Существует 4 основных типа позиционирования элементов в CSS:

  1. position: absolute;
  2. position: relative;
  3. position: fixed;
  4. position: static.

Все они могут использоваться для горизонтального и вертикального позиционирования.

Относительное позиционирование. Свойство position: relative

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

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

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

Работают не все свойства перемещения по координатам. Всего их 4:

  1. Top > — указывает расположение элемента относительно верхней части блока.
  2. Bottom > — располагает блок относительно нижнего края.
  3. Right > — задает расположение относительно правой границы внешнего блока.
  4. Left > — перемещает элемент относительно левой части внешнего контейнера.


Если вы сделаете запись из 4 свойств: , , , , то будут работать только первые заданные свойства. То есть, сработает раньше, чем , а , раньше чем .

Ещё одним плюсом использования такого типа позиционирования является возможность использования свойства z-index. За счет этого относительное позиционирование в css лучше всего подходит для слоевой верстки.

Данное свойство прекрасно подойдет для позиционирования картинок, кнопок, таблиц и других блоков.

Позиционирование css: какое оно бывает и где применяется?

Дата публикации: 2020-02-25

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

Какие бывают виды

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

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

Это первый из известных видов. Задается так: position: absolute. После этого блок теряет свои привычные свойства и полностью выпадает из нормального потока. Что представляет собой этот поток? Попробуйте поставить в разметке несколько блочных элементов подряд. Как они станут? Друг за другом, и ни как иначе.

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Элемент будет сдвинут в нижний правый угол. Я замечаю, что часто так делают кнопку наверх – просто размещают ее абсолютно в самый угол. А вот другой пример, в котором я покажу сначала возможную разметку:

А теперь css-стили для этого фрагмента:

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

Относительное позиционирование css-элементов

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Еще важно знать, что смещение происходит не от краев окна веб-обозревателя, а от того места, где изначально стоял блок. То есть:

Блок подвинется на 50 пикселей вправо и на 10 влево.

Фиксация

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

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

Position:static или обычное статическое положение

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

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

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

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

Другие приемы: центровка, плавающие блоки

Свойство position не решает всех проблем с расстановкой блочных элементов. Как бы вы, например, создали сетку сайта с его помощью? У меня нет хороших идей. Тут на помощь приходят другие свойства.

С помощью float в css часто делают сетки. Свойство позволяет прижать блок к левому или правому краю родителя (float: left, float: right), давая возможность нескольким блочным элементам стать в одну линию, что встречается сплошь и рядом на любых сайтах.

Центровка делается так: блоку нужно записать определенную ширину, после чего задать свойство margin: 0 auto. Именно значение auto выровняет его по горизонтали точно по центру. Естественно, для этого он должен быть единственным в своей строке, иначе ничего не получится.

Все перечисленные в этой статьи виды позиционирования могут пригодиться веб-разработчику. Где-то иконку нужно вставить (position: absolute), где-то, чуть-чуть подправить положение блока, оставив за ним место (position: relative), а где и виджет зафиксировать (position: fixed). В общем, знание этого свойства точно лишним не будет.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Свойство position

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

position: static

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

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

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

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

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

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

position: relative

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

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

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

Координаты

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

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

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

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

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

position: absolute

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

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


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

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

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

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

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

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

Как работает position: absolute;

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top , right , bottom , left , от края ближайшего родителя с position не static . Передвинуть его относительно своего расположения можно с помощью margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

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

Поместить элемент над другими элементами, убрав его из потока

Элемент с position: absolute; не влияет на размер родителя.

Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static

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

top: 0; left: 0; right: 0; bottom: 0;

Если свойство border задано ближайшему родителю с position не static , то элемент смещается относительно внутреннего края рамки, созданной этим свойством.

Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static . Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static .

Использование свойств top или bottom , left или right зависит от конкретной ситуации.

top: -5px; top: 0; top: 5px; top: 100%; bottom: -5px; bottom: 0; bottom: 5px; bottom: 100%;

Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static

Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute; .

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).

left: auto; left: 50%; left: 1em; left: 0; left: -1em; right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em; bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

Стили, чтобы растянуть блок на всю ширину и высоту родителя без border , но с position не static :

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%; ). Если расстояние от left не auto до right не auto меньше width , то свойство right игнорируется (см., left: 50%; right: 50%; ).

left: auto; left: 50%; left: 1em; left: 0; left: -1em; right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em; bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

Свойство height в процентах не заменяется на height: auto; , даже когда ближайший родитель имеет height: auto; .

Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute; .

Позиционирование вложенного элемента относительно родителя

Родитель с position: static; пропускается. Если нет родителя с position не static , то положение элемента рассчитывается относительно границы области просмотра окна браузера (см., левый верхний угол страницы).

Чтобы абсолютно позиционированный блок растянуть на всё содержимое вместе со скроллингом ближайшего позиционированного предка, нужно обернуть содержимое в ещё один тег, относительно которого позиционировать блок (см., прокрутить родителя).

Родитель с position: static; и overflow не visible , стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute; .

Свойства width , margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static .

5 особенностей позиционирования в CSS

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

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования.

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

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

  • top
  • right
  • bottom
  • left
  • Начальное значение этих свойств — ключевое слово auto .

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

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

  • абсолютно ( absolute ) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
  • относительно позиционированные ( relative ) и приклеенные ( sticky ) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
  • фиксированные ( fixed ) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом ( overflow:auto ). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

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

Позиционирование элементов с абсолютным типом позиционирования

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

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

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

Это демонстрируется следующим примером:

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

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

Абсолютно позиционированные элементы игнорируют свойство float


Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство float получит значение none . С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим.

Взгляните на соответствующее демо:

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

Абсолютно позиционированные строчные элементы становятся блочными

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

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов

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

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

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

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ ( padding ) или граница ( border ), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

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

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

Демо показывает эту разницу:

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

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

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

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

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

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

Box-модель в CSS и типы позиционирования.

Прежде чем приступить, советую вам прочитать статью Box-модель в CSS. В двух словах: каждый элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

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

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

Значение static используется по умолчанию. Любой элемент с позиционированием static находится в общем потоке документа. Правила для его размещения определяются Box-моделью. Для таких элементов, свойства top, right, bottom и left будут игнорироваться. Для того, чтобы использовать эти свойства, позиционирование элемента должно быть абсолютным (absolute), относительным (relative) или фиксированным (fixed).

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

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

Абсолютное позиционирование удаляет элемент из общего потока документа. Что касается элементов вокруг, то в этом случае они просто игнорируют искомый, как будто ему установлено свойство display: none;. Если вы не хотите чтобы пространство для такого элемента заполнялось другими элементами, то вам надо придумать другой подход.

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

Ключевой момент в абсолютном позиционировании — это понимание того, что является точкой отсчёта. Если свойству top указано значение 20px, то откуда их необходимо отсчитывать.

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

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

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

Представьте себе это так: некое изображение сдвигается, а на его месте остаётся «призрак», все элементы располагаются относительно этого «призрака». Это позволяет нам накладывать элементы друг на друга.

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

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

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

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

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

Второе отличие исходит из его названия. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.

Z-index

Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину.

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

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

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

Рассмотрим несколько общих проблем, связанных с позиционированием, а также несколько слов об их решении.

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

Одновременно можно использовать position:relative и float.

Когда одновременно указывается position:absolute и float, то применяется не последнее указанное свойство. В этом случае, независимо от порядка следования этих стилей, применяется position:absolute, а итоговое (или вычисленное) значение свойства float устанавливается в none, независимо от начального значения, т.е. игнорируется.

В IE6 и IE7 есть ещё одна проблема с z-index-ом. IE смотрит на родительский элемент для определения в какой группе элементов находится вершина стека, остальные браузеры используют глобальный контекст. Например:

Мы ожидаем, что параграф будет находиться выше, чем изображение, поскольку его z-index больше. Однако IE6 и IE7 располагают выше картинку, поскольку они находятся в разных стеках документа. Один стек для div, второй для img, а у картинки z-index выше, чем у div-а.

Заключение

Свойство position устанавливает поведение расположения элемента в соответствии с одной из схем позиционирования. Доступные значения свойства: absolute, relative, fixed, static (по умолчанию) и inherit.

Схемы позиционирования определяют правила размещения элемента на web-странице, а также влияние на расположение соседних элементов.

Свойство z-index может быть применено только для элементов с установленным свойством position. Оно добавляет третье измерение на странице и устанавливает порядок стека элементов.

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

Илон Маск рекомендует:  Получение и установка текущей раскладки клавиатуры
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL