Методы позиционирования элементов в css
Содержание:
- Статическое позиционирование
- Встроенные элементы, позиционированные абсолютно, ведут себя как блочные элементы
- CSS position
- Поддержка браузерами
- Относительное позиционирование
- CSS классы — когда их использовать
- Абсолютно позиционированные элементы игнорируют свойство float
- position: absolute в позиционированном родителе
- Абсолютное позиционирование
- Продвинутое абсолютное позиционирование
- Нормальное позиционирование: static
- CSS Tutorial
- Абсолютное позиционирование (absolute)
- Значения background-position
- Обзор доступных способов позиционирования
- «Липкая» разведка
- Виды позиционирования
Статическое позиционирование
Статическим называют позиционирование, заданное по умолчанию для всех элементов на веб-странице. Если к элементу не применять свойство , то он будет статическим и будет отображаться на веб-странице согласно общему потоку элементов.
При применении CSS свойств , , или к статически позиционированному элементу, они будут игнорироваться.
Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
p { position: static; }
</style>
</head>
<body>
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
Попробовать »
Встроенные элементы, позиционированные абсолютно, ведут себя как блочные элементы
Встроенный элемент, который позиционирован, как absolute или fixed, приобретает характеристики элементов уровня блока.
Мы определяем два различных элемента. Первый из них (зеленое поле) является блочным элементом (т.е. div). Второй (красное поле) является встроенным элементом (span)
Обратите внимание, что у нас отображается только зеленое поле
Красное поле не видно, потому что мы задаем для него свойства width и height, которые могут быть применены только к блочным и встроенным блочным элементам. И это пустой элемент (т.е. он не содержит вложенных или дочерних элементов).
Если мы устанавливаем для него тип позиционирования absolute или fixed, элемент становится видимым, потому что ведет себя как блочный элемент.
CSS position
Свойство позволяет определить то, как будет позиционироваться элемент на странице. Для этого существует пять различных значений, которые рассмотрены ниже.
-
— данное значение задает абсолютное позиционирование элемента. Что это значит? Во-первых, абсолютно позиционированный элемент полностью отделяется от общего потока HTML-документа. Другие элементы страницы будут вести себя так, будто абсолютно позиционированного элемента не существует. Во-вторых, абсолютно позиционированный элемент можно перемещать относительно его родителя (по умолчанию это окно браузера) при помощи свойств , , и (о них мы расскажем уже в следующем уроке).
-
— относительное позиционирование элемента. В данном случае элемент, как обычно, размещается относительно своего текущего положения в потоке документа, то есть визуальных изменений не видно. Но затем, пользуясь свойствами , , и , можно двигать относительно позиционированный элемент в нужном направлении (начальной точкой отсчета будет исходное положение элемента). Это чем-то похоже на функцию translate() свойства transform.
-
— фиксированное позиционирование элемента. По принципу работы это похоже на абсолютное позиционирование, однако разница в том, что в отличие от абсолютно позиционированного элемента, фиксированный элемент остается на месте при прокрутке веб-страницы (аналогичным образом себя ведет фиксированное фоновое изображение).
-
— это микс относительного и фиксированного позиционирования. Элемент позиционируется относительно до тех пор, пока не пересекает определенный порог, после чего элемент становится фиксированным в рамках ближайшего родителя. По состоянию на 2017 год не очень хорошо поддерживается браузерами. Необходимо использование вендорного префикса .
-
(значение по умолчанию) — статическое позиционирование. Такой элемент ведет себя как обычно. На практике данное значение может применяться, например, для перезаписи другого значения. Свойства , , и не влияют на элемент со статическим позиционированием.
Еще одна особенность абсолютно позиционированного элемента заключается в том, что если его родителем является элемент с относительным, фиксированным либо абсолютным позиционированием, то при перемещении абсолютно позиционированного элемента свойствами , , и точка отсчета будет вестись от данного родительского элемента. В противном случае абсолютно позиционированный элемент ведет свой отсчет от окна браузера. Таким образом можно привязать абсолютно позиционированный элемент к родительскому контейнеру и контролировать пределы, за которые он выходит.
Далее в учебнике: свойства top, left, bottom и right для перемещения позиционированных элементов.
Поддержка браузерами
Свойство position работает во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS.
Но поддержка значений fixed и sticky различается среди браузеров. Вот таблицы совместимости для этих двух значений:
<iframe src="http://caniuse.com/css-fixed/embed/" width="650" height="340" align="left" scrolling="no"> </iframe>
В Internet Explorer фиксированное позиционирование в CSS не работает, если документ находится в режиме совместимости:
<iframe src="http://caniuse.com/css-sticky/embed/" width="650" height="340" align="left" scrolling="no"> </iframe>
«Прилипающее» позиционирование будет работать в Firefox 26 (Gecko 26) только если для параметра layout.css.sticky.enabled в about:config задано значение true.
Значения center и page в настоящее время не поддерживаются ни одним браузером.
Относительное позиционирование
Относительное позиционирование — странная штука. Если судить по картинке выше, то оно похоже на абсолютное, но к нему зачем-то добавляется странный эффект: бокс продолжает занимать место в потоке. Действительно, именно для позиционирования боксов этот метод используется редко. Хотя изредка и бывают ситуации, когда надо ради визуальных эффектов пододвинуть один бокс под другой.
Чаще же всего используют вообще без задания смещений. В этом случае он ведет себя как обычный статический бокс, но поскольку он все таки не статический, то он создает внутри себя содержащий блок, тот самый, относительно которого будут позиционироваться боксы внутри него.
Вот пример, который показывает полезность этого свойства. Пусть у нас есть три блока: «заголовок», «содержимое» и «низ», а внутри «содержимого» лежит блок «об авторе»:
И пусть высота заголовка нам точно не известна. Боксы эти статические, идут один за другим, и какая бы высота у заголовка ни была, содержимое будет начинаться прямо под ним.
А теперь нам хочется внутри содержимого блочок об авторе расположить так, чтобы он был точно в правом верхнем углу содержимого.
Напишем ему:
Но этого недостаточно, так как содержащим блоком для него сейчас является все окно, и блок об авторе уедет поверх заголовка. Точно поставить ему расстояние от верха тоже нельзя, потому что размер заголовка у нас может быть разный. Следующая мысль — сделать блок содержимого тоже абсолютным, тогда он станет содержащим блоком. Но тогда он сам выдернется из потока и низ прижмется прямо к заголовку.
Вот это и есть случай, в котором работает . Если мы поставим его блоку содержимого, то он никуда не денется из потока, но в то же время станет содержащим блоком, и «об авторе» расположится в его правом верхнем углу.
CSS классы — когда их использовать
Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы. Для этого необходимо выполнить два шага:
Шаг 1 — добавить класс в HTML
Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала разметить элементы с атрибутом class=»class-name». Вот пример:
<div class="box"> Контейнер 1 </div> <div class="box"> Контейнер 2 </div> <div class="box"> Контейнер 3 </div>
В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS:
div.box{
height:200px;
width:200px;
text-align:center;
font-size:14px;
color:#090;
background-color:#ddd;
margin-right:10px;
}
Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname{ }, мы используем tagname.classname{ }. Точка между tagname и classname является тем, что определяет правило как CSS класс
Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали
В этом примере использовалось свойство margin-right:10px. Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.
Такое сочетание должно дать вам что-то вроде этого:
Если вы не укажете класс
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»:
<div> Контейнер 4 </div>
Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {} не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname{ }. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class!
Использование более чем одного класса
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
<div class="box red"> Контейнер 1 </div> <div class="box green"> Контейнер 2 </div> <div class="box blue"> Контейнер 3 </div>
Расположение каскадом
Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red»
Иначе class=»red» будет применяться до class=»box». Надеюсь, это понятно!
Изменим наш код CSS:
div.box{
height:200px;
width:200px;
text-align:center;
font-size:14px;
color:#090;
background-color:#dddddd;
margin-right:10px;
}
div.red{
background-color:#ffcccc;
}
div.green{
background-color:#ccffcc;
}
div.blue{
background-color:#ccccff;
}
Поскольку у каждого из трех контейнеров есть CSS класс .box, к ним всем применяются свойства, прописанные в div.box. Но к каждому <div> применяется также дополнительный класс (red, green, или blue). Конечный результат:
Примечание:div.boxbackground-color:#ccccccцветовыеbox redbackground-colordiv.reddiv.boxCSSHTML
CSS классы при создании макета сайта
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
- Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail{ width:200px;height:200px; };
- Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button {};
- Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover{ } a.nav: Hover {}.
Классы DR CSS; TL
Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS. Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS.
И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML, действительно имеет значение, так что следите за этим.
Абсолютно позиционированные элементы игнорируют свойство float
Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство получит значение . С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим.
Взгляните на соответствующее демо:
See the Pen Little-known thing #2 — The absolutely positioned elements ignore the «float» property by George (@georgemarts) on CodePen.
В этом примере, мы определяем два разных элемента, уплывающих вправо. Отметьте, что когда красный блок становится абсолютно позиционированным, он игнорирует значение свойства , в то время как относительно спозиционированный зеленый блок сохраняет значение .
position: absolute в позиционированном родителе
Если у элемента есть позиционированный предок, то работает относительно него, а не относительно документа.
То есть, достаточно поставить родительскому позицию , даже без координат – и заголовок будет в его правом-верхнем углу, вот так:
Нужно пользоваться таким позиционированием с осторожностью, т.к оно может перекрыть текст. Этим оно отличается от
Сравните:
-
Используем для размещения элемента управления:
Часть текста перекрывается. Кнопка более не участвует в потоке.
-
Используем для размещения элемента управления:
Браузер освобождает место справа, текст перенесён. Кнопка продолжает находиться в потоке, просто сдвинута.
Абсолютное позиционирование
Если дочерний элемент имеет абсолютное значение, то родительский будет вести себя так, как будто дочернего вообще нет. Элемент позиционируется относительно своего ближайшего предка, который не является . Если такого не найдется, тогда он спозиционируется относительно страницы.
Создадим два блока. При этом для предка не будем устанавливать , а для дочернего зададим:
В результате видим, что элемент расположился относительно всего документа (прижался к его низу), а не своего предка.
See the Pen
position absolute 2 by Андрей (@adlibi)
on CodePen.
Таким образом для корректного положения нужно задать позиционирование для предка. Например:
Теперь свойства , , , соотносятся с предком и видно, как изменилось положение элемента – получилось прижать элемент к низу блока-родителя.
See the Pen
position absolute by Андрей (@adlibi)
on CodePen.
Кроме того:
- Ширина элемента с устанавливается по содержимому.
- Элемент получает свойство .
Продвинутое абсолютное позиционирование
Перед тем как перейти к рассмотрению продвинутого применения абсолютного позиционирования, хочу обратить Ваше внимание, на то, что если вы не указываете значение вертикальной позиции элемента с абсолютным позиционированием (top , или bottom ), или наоборот горизонтальной позиции (left, или right), то браузер оставит элемент в том же месте на странице, где он находится в общем потоке (будет размещен поверх содержимого, если оно есть). Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера
Настало время рассмотреть подобный пример:
Мы уже с Вами узнали о том, что элемент с абсолютным позиционированием (position: absolute) позиционируется относительно заданного края его предка, при этом предок должен иметь значение position отличное от, установленного по умолчанию — static, иначе отсчёт (смещение) будет вестись относительно, указанного края окна браузера. Настало время рассмотреть подобный пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Абсолютное позиционирование относительно предка</title>
<style>
.relative {
position: relative; /* относительное позиционирование элемента */
margin-top: 100px; /* внешний отступ от вержнего края */
width: 400px; /* ширина элемента */
height: 200px; /* высота элемента */
background-color: blue; /* цвет заднего фона */
}
.container {
height: 100px; /* высота элемента */
background-color: yellow; /* цвет заднего фона */
}
.absolute {
position: absolute; /* абсолютное позиционирование элемента */
top: ; /* смещение от вержнего края */
right: ; /* смещение от правого края */
width: 50px; /* ширина элемента */
height: 50px; /* высота элемента */
background-color: red; /* цвет заднего фона */
}
</style>
</head>
<body>
<div class = "relative">
relative
<div class = "container">
container
<div class = "absolute">
absolute
</div>
</div>
</body>
</html>
Давайте внимательно разберем, что мы сделали в этом примере:
Для начала мы разместили блок (элемент
), который имеет относительное позиционирование. Указали для него внутренний отступ от верха (margin-top) равный 100 пикселей, задали ширину, высоту и цвет заднего фона.
Далее внутри него разместили блочный элемент (элемент ), который имеет высоту 100 пикселей и цвет заднего фона жёлтый. Как вы понимаете, этот элемент имеет статическое позиционирование (значение по умолчанию), так как значение свойства position не наследуется, и он не унаследовал от родительского блока относительное позиционирование.
Затем мы поместили внутри нашего контейнера со статическим позиционированием элемент, который имеет абсолютное позиционирование. Указали для него ширину и высоту равными 50 пикселей и цвет заднего фона красныйОбратите внимание на самый важный момент, что этот элемент позиционируется не относительно окна браузера, не относительно родительского элемента, а относительно своего предка, который имеет позиционирование, отличное от статического! В итоге наш элемент мы разместили в верхнем правом углу его предка с относительным позиционированием
Результат нашего примера:
Рис. 160 Пример абсолютного позиционирования элемента относительно его предка.
Давайте подытожим изученную в этой статье учебника информацию о позиционировании элементов:
- Статическое позиционирование это классическое размещение элементов сверху вниз (элементы отображаются в порядке, как они указаны в потоке HTML документа), оно считается значением по умолчанию для всех элементов.
- Элемент позиционируется относительно окна браузера, если у него фиксированное позиционирование (элемент зафиксирован при прокрутке документа).
- Элемент позиционируется относительно окна браузера, если у него абсолютное позиционирование, и он не вложен в элемент, который имеет позиционирование, отличное от статического.
- Элемент, для которого задано относительное позиционирование смещается относительно положения в потоке документа (относительно его текущей позиции).
- Элемент позиционируется относительно сторон другого элемента в том случае, если он имеет предка, или родителя с абсолютным, относительным или фиксированным позиционированием.
Нормальное позиционирование: static
Нормальное (статичное) позиционирование — это обычное поведение блочных элементов в том порядке, в котором они прописаны в коде сверху вниз. Его не нужно прописывать, потому что оно стоит по умолчанию. Но иногда position: static используют, чтобы отменить другой вид позиционирования при определённых событиях на веб-странице в сценариях JavaScript или в эффектах CSS для возврата к начальному значению (например, в свойстве :hover).
Для нормального позиционирования характерны следующие особенности:
- элементы выводятся в том порядке, как они описаны в коде
- свойства left, right, top, bottom, z-index не работают, применять их нет смысла
Наша заготовка как раз использует нормальное позиционирование и здесь всё понятно.
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL
CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders
CSS Margins
Margins
Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset
CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive
CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important
Абсолютное позиционирование (absolute)
Установка абсолютного позиционирования элементу осуществляется посредством задания ему .
Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.
Позиционирование выполняется относительно ближайшего позиционированного предка.
<div id="id-1" style="position: absolute">
<div id="id-2" style="position: relative">
<div id="id-3" style="position: absolute">
...
</div>
</div>
</div>
Под позиционированным элементом понимается элемент с , равным , , или .
В этом примере позиционирование элемента будет выполнять относительно , т.к. он является позиционированным и является по отношению к нему более близким предком.
Если данный элемент не был бы позиционированным, то позиционирование выполнялось бы относительно :
<div id="id-1" style="position: absolute">
<div id="id-2">
<div id="id-3" style="position: absolute">
...
</div>
</div>
</div>
Если среди предков у элемента с нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента .
Когда элементу устанавливаем без указания CSS-свойств (, , и ), определяющих его положение, он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).
При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него
<div class="container"> <div class="element-1">FIRST ELEMENT</div> <!-- элемент имеет абсолютное позиционирование и ему не установлены CSS-свойства top, bottom, left и right --> <div class="element-2" style="position: absolute;">SECOND ELEMENT</div> <div class="element-3">THIRD ELEMENT</div> </div>
CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с .
CSS-свойства , , и задают положение элемента относительно ближайшего позиционированного предка или , если такого предка нет.
Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат и ( и ).
Если элементу одновременно установить , и , то предпочтение будет отдано и .
Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
<body> <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div> <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div> </body>
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- — фоновый рисунок прилеплен к левой стороне элемента;
- — фоновый рисунок расположен в центре оси x;
- — фоновый рисунок прилеплен к правой стороне элемента.
div {
background-position-x: left;
}
Ключевые слова для вертикального позиционирования
- — фоновый рисунок прилеплен к верхней стороне элемента;
- — фоновый рисунок расположен в центре оси y;
- — фоновый рисунок прилеплен к нижней стороне элемента.
div {
background-position-y: bottom;
}
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Примеры выравнивания фона с помощью background-position
Если вы установили повтор фона с помощью свойства , то будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
div {
background-position: 10px 25px;
}
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
div {
background-position: right 15px bottom 40px;
}
Здесь ключевые слова и говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, — это расстояние между фоном и правой стороной элемента, а — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Обзор доступных способов позиционирования
Свойство CSS определяет тип позиционирования элемента.
Опции для позиционирования
это значение свойства позиционирования по умолчанию. Мы сообщаем, что этот элемент не использует позиционирование — позиционирование применяется, только если задать тип позиционирования, отличный от дефолтного.
Для этого надо свойству задать одно из следующих значений:
И только после задания позиционирования, можно использовать свойства, смещающие элемент:
- Начальное значение этих свойств — ключевое слово .
Надо учитывать, что если у элемента задано свойство в значении или , то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство , определяющее порядок наложения.
Различия между основными способами позиционирования
Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:
- абсолютно () позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
- относительно позиционированные () и приклеенные () сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
- фиксированные () элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (). И только при отсутствии таких предков они позиционируются относительно зоны видимости.
Подробнее это можно рассмотреть в демо:
See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.
Примечание: позиционирование “приклеенных элементов” до сих пор является экспериментальной технологией с . Конечно, при желании вы можете использовать полифилл, чтобы добавить этот функционал в браузер, но с учетом малой распространенности это свойство в статье обсуждаться не будет.
«Липкая» разведка
Во время своих экспериментов я заметил, что если элемент с является единственным ребёнком своего родителя-обёртки, то этот «липкий» элемент не залипает.
<!-- НЕ РАБОТАЕТ!!! --><style> .sticky { position: sticky; top: 0; }</style><div class="wrapper"> <div class="sticky"> Некий контент </div></div>
Когда я добавлял больше элементов внутрь родителя-обёртки всё начинало работать как ожидалось.
Почему так происходит?Причина кроется в том, что элемент с может перемещаться только в пределах контейнера, в котором находится. А поскольку в моём случае он был единственным ребёнком, у него не было элементов-братьев, поверх которых он мог перемещаться.
Виды позиционирования
При позиционировании блок размещается на странице в соответствии с координатами, которые ему указаны.
Блок находится в указанном месте независимо от других элементов, которые могут быть в этом месте.
Если там присутствуют элементы, то блок просто накладывается сверху
и частично закрывает эти элементы. Это может показаться странным, но на самом деле, в дизайне часто применяется
этот эффект.
Существуют следующие виды позициционирования блоков:
Абсолютное позиционирование. Элемент размещается
по указанным координатам. Координаты отсчитываются от границ страницы или от границ внешнего блока,
если этот блок тоже имеет позиционирование.
Относительное позиционирование. Элемент смещается
относительно того места, которое он занимал в основном потоке документа. Другие элементы не занимают его место.
Оно остаётся пустым, если его не перекроют позиционированные элементы.
Фиксированное позиционирование. Элемент
размещается по координатам относительно границ окна браузера. При прокрутке страницы такой элемент не движется
вместе со всеми элементами, а остаётся на одном месте в окне браузера.
Статическое позиционирование. Это расположение элемента в основном потоке документа.
То есть, элемент находится там, где и должен находиться без позиционирования. Если ему заданы
координаты, то они игнорируются.
Позиционирование устанавливает свойство position. Оно принимает значения:
position: absolute; — абсолютное
position: relative; — относительное
position: fixed; — фиксированное
position: static; — статическое
Для указания координат используются свойства:
left — смещение левого края элемента относительно левой
границы окна браузера или внешнего блока.
right — смещение правого края элемента относительно правой границы окна браузера или
внешнего блока.
top — смещение верхнего края элемента относительно верхней границы окна браузера или
внешнего блока.
bottom — смещение нижнего края элемента относительно нижней границы окна браузера или
внешнего блока.
Эти свойства могут принимать следующие значения:
left: auto; — без смещения (по умолчанию)
left: величина в единицах измерения CSS
left: величина в процентах. Если элемент смещается относительно окна браузера,
то проценты расчитываются от размеров окна браузера. А если елемент смещается относительно внешнего блока,
то проценты расчитываются от размеров блока.
left: inherit; — значение принимается от родительского элемента
У остальных свойств значения указываются так же, как у left.
