Содержание

Свойство background-position | CSS справочник

basicweb.ru

  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML


  • HTML учебник

  • Справочник тегов

  • Атрибуты событий

  • Глобальные атрибуты

  • Мнемоники

  • Коды языков

  • HTML цвета

  • Тесты знаний

CSS


  • CSS учебник

  • Справочник свойств

  • CSS селекторы

  • CSS функции

  • CSS правила

  • Flexbox генератор

  • Grid генератор

  • LESS учебник

JavaScript


  • Интерфейсы веб API

  • Объект Array

  • Объект Date

  • Объект Function

  • Объект Global

  • Объект JSON

  • Объект Math β

  • Объект Number

  • Объект Object

  • Объект Promise

  • Объект RegExp

  • Объект String

jQuery


  • jQuery селекторы

  • jQuery события

  • jQuery методы DOM

  • jQuery перемещения

  • jQuery утилиты

  • jQuery эффекты

  • jQuery AJAX

  • jQuery объект Callbacks

  • jQuery объект Deferred

CSS свойства

  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • @font-face
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-start
  • grid-row-gap
  • grid-row-end
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • justify-content
  • justify-items
  • justify-self
  • height
  • @keyframes
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • @media
  • min-height
  • min-width
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • place-items
  • place-self
  • position
  • quotes
  • resize
  • right
  • tab-size
  • table-layout
  • text-align
  • text-align-last

Свойства object-fit и object-position. Масштабируем пропорционально.

1. Свойство object-fit

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

Замещаемыми элементами являются элементы, чьи размеры и внешний вид определяются внешним ресурсом. К ним относятся элементы <img> <input type="image">, <embed>, <iframe>, <video>, <canvas> и <object> в случае когда они содержат встраиваемое содержимое, а также элемент <audio>, использующий пользовательские элементы управления.

Свойство object-fit масштабирует, обрезает или растягивает содержимое замещаемых элементов. Свойство хорошо поддерживается в последних версиях Chrome, Firefox и Safari. Для браузера IE8-11 можно использовать полифил (библиотеку, добавляющую в старые браузеры поддержку свойств, работающих в современных браузерах).

Поддержка браузерами

IE: не поддерживает
Firefox: 36.0
Chrome: 31.0
Safari: 7.1 только object-fit, 10.0 полная поддержка
Opera: 19.0
iOS Safari: 8.0 только object-fit, 10.1 полная поддержка
Opera Mini: -o-
Android: 4.4.4
Chrome for Android: 54.0

object-fit
fillЗначение по умолчанию. Содержимое замещаемого элемента полностью заполняет область контейнера тега, используя его высоту и ширину.
containСодержимое элемента масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
coverСодержимое элемента обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
scale-downСодержимое элемента выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.
noneЗамещаемое содержимое не изменяет свои собственные размеры, чтобы поместиться и заполнить область контейнера.
initialУстанавливает это свойство в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

See the Pen BQGdYy by Elena (@html5book) on CodePen.

2. Свойство object-position

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Не наследуется.

object-position
Значения:
left top,
left center,
left bottom,
right top,
right center,
right bottom,
center top,
center center,
center bottom
Позиционирование по горизонтали и вертикали задаётся с помощью пары ключевых слов. Если задано одно ключевое слово, второе примет значение center.
px / em/ %Указывается два значения, первое определяет расстояние между левой стороной изображения и левым краем элемента-контейнера (по горизонтали), второе значение указывает расстояние между верхней стороной изображения и верхним краем элемента-контейнера (по вертикали). Также можно использовать отрицательные значения для обрезки части контента.
Процентное значение рассчитывается относительно содержимого и контейнера, в котором оно расположено. Одновременно можно комбинировать значения в px, em и %.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

See the Pen vyQWme by Elena (@html5book) on CodePen.

position | CSS | WebReference

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Краткая информация

Значение по умолчаниюstatic
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

position: absolute | fixed | relative | static | sticky

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

absolute
Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
fixed
Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
relative
Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
sticky
Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src=»image/girl.jpg» alt=»Девочка»>
</div>
</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

Объект.style.position

Примечание

Браузер Safari поддерживает значение -webkit-sticky.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

static, relative, absolute4121411
fixed7121411
sticky1656426. 132
static, relative, absolute1161
fixed1161
sticky326.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08. 2017

Редакторы: Влад Мержевич

CSS: position. Примеры с позиционированием

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

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

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

Свойство z-index работает только для элементов, у которых position задано как relative, absolute или fixed.

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

Создадим заготовку — один контейнер, в котором разместим три блока.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .parent{
            background-color: gray;
			width: 400px;
        }
		.child{
            height: 50px;
        }
        .child-one {
            background-color:aqua;
        }
        .child-two {
            background-color: honeydew;
        }
        .child-three{
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>
        I am a parent
        <div>First Child</div>
        <div>Second Child</div>
        <div>Third Child</div>
    </div>
    
</body>
</html>

Нормальное позиционирование: static

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

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

  • элементы выводятся в том порядке, как они описаны в коде
  • свойства left, right, top, bottom, z-index не работают, применять их нет смысла

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

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

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

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

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

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

Допустим мы хотим сместить первый дочерний элемент влево и вниз.


.child-one {
    background-color:aqua;
    position: relative;
    left: 20px;
    top: 10px;
}

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

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

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

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

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

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

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

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

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.


.child-one {
    position: absolute;
}

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

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


.child-one {
    position: absolute;
    top: 5px;
    left: 5px;
}

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

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


.parent{
    position: relative;
}

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

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


.child-one {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 40px;
    height: 40px;
}

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

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

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


.child-one {
    position: fixed;
    top: 5px;
    left: 5px;
}

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

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

Липкое позиционирование — sticky

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


.child-one {
    position: sticky;
    top: 5px;
    left: 5px;
}
Реклама

Позиционирование элементов. Свойство position — учебник CSS

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

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

CSS position

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

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

  • relative — относительное позиционирование элемента. В данном случае элемент, как обычно, размещается относительно своего текущего положения в потоке документа, то есть визуальных изменений не видно. Но затем, пользуясь свойствами top, right, bottom и left, можно двигать относительно позиционированный элемент в нужном направлении (начальной точкой отсчета будет исходное положение элемента). Это чем-то похоже на функцию translate() свойства transform.

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

  • sticky — это микс относительного и фиксированного позиционирования. Элемент позиционируется относительно до тех пор, пока не пересекает определенный порог, после чего элемент становится фиксированным в рамках ближайшего родителя. По состоянию на 2017 год не очень хорошо поддерживается браузерами. Необходимо использование вендорного префикса -webkit-.

  • static (значение по умолчанию) — статическое позиционирование. Такой элемент ведет себя как обычно. На практике данное значение может применяться, например, для перезаписи другого значения. Свойства top, right, bottom и left не влияют на элемент со статическим позиционированием.

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


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

позиция фона — учебник CSS

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y.

Значения background-position

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

Ключевые слова для горизонтального позиционирования

  • left — фоновый рисунок прилеплен к левой стороне элемента;
  • center — фоновый рисунок расположен в центре оси x;
  • right — фоновый рисунок прилеплен к правой стороне элемента.

div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

  • top — фоновый рисунок прилеплен к верхней стороне элемента;
  • center — фоновый рисунок расположен в центре оси y;
  • bottom — фоновый рисунок прилеплен к нижней стороне элемента.

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-repeat, то 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;
}

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

Процентные значения

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

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

Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:

Важно: фоновые изображения и печать

Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег <img>.

Поддержка браузерами

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.


Далее в учебнике: background-attachment — фиксация фона.

Позиция

— Веб-технологии для разработчиков

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Синтаксис

Позиция Свойство задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

статический
Элемент позиционируется в соответствии с обычным потоком документа. Свойства верхний , правый , нижний , левый и z-index не имеют эффекта .Это значение по умолчанию.
родственник
Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается на относительно себя на основе значений верхний , правый , нижний и левый . Смещение не влияет на положение других элементов; таким образом, пространство, отведенное для элемента в макете страницы, такое же, как если бы позиция была static .
Это значение создает новый контекст наложения, если значение z-index не равно auto .Его влияние на table - * - group , table-row , table-column , table-cell и table-caption элементов не определено.
абсолютное
Элемент удаляется из обычного потока документов, и пространство для него не создается в макете страницы. Он позиционируется относительно ближайшего предка, если таковой имеется; в противном случае он размещается относительно исходного содержащего блока. Его окончательное положение определяется значениями верхний , правый , нижний и левый .
Это значение создает новый контекст наложения, если значение z-index не равно auto . Поля абсолютно позиционированных блоков не сжимаются с другими полями.
фиксированная
Элемент удаляется из обычного потока документов, и пространство для него не создается в макете страницы. Он позиционируется относительно начального содержащего блока, установленного окном просмотра, за исключением случаев, когда один из его предков имеет преобразование , перспективу или фильтр , для которого установлено значение, отличное от нет (см. Спецификацию преобразований CSS) , и в этом случае этот предок ведет себя как содержащий блок.(Обратите внимание, что есть несоответствия браузера с перспективой и фильтром , способствующим формированию блока.) Его окончательное положение определяется значениями верхний , правый , нижний и левый .
Это значение всегда создает новый контекст наложения. В печатных документах элемент размещается в одном и том же месте на каждой странице .
липкий
Элемент позиционируется в соответствии с обычным потоком документа, а затем смещается относительно своего ближайшего предка с прокруткой и содержащего блока (ближайшего предка на уровне блока), включая элементы, связанные с таблицей, на основе значений верхних , справа , снизу и слева .Смещение не влияет на положение других элементов.
Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, у которого есть «механизм прокрутки» (создается, когда переполнение скрыто , прокрутка , авто или оверлей ), даже если этот предок не t ближайший предок, выполняющий прокрутку. Это эффективно предотвращает любое «липкое» поведение (см. Проблему GitHub на W3C CSSWG).

Описание

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

  • Позиционированный элемент — это элемент, для которого вычисленное значение позиции равно относительному , абсолютному , фиксированному или липкому . (Другими словами, это что угодно, кроме static .)
  • Элемент , расположенный относительно друг друга, — это элемент, для которого вычисленное значение позиции равно относительно . Свойства верхний и нижний определяют вертикальное смещение от его нормального положения; свойства left и right определяют горизонтальное смещение.
  • Абсолютно позиционированный элемент — это элемент, для которого вычисленное значение позиции равно абсолютное или фиксированное . Свойства верхний , правый , нижний и левый определяют смещения от краев содержащего элемент блока. (Содержащий блок является предком, относительно которого позиционируется элемент.) Если у элемента есть поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
  • Элемент с липким позиционированием — это элемент, для которого вычисленное значение позиции равно sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок не пересечет указанный порог (например, для top установлено значение, отличное от auto) в его корне потока (или в контейнере, в котором он прокручивается), после чего он рассматривается как «застрявший» до тех пор, пока встречает противоположный край содержащего его блока.

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

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

  • Если указаны как верхний , так и нижний (технически, не авто ), выигрывает верхний .
  • Если указаны слева и справа , слева побеждает, если направление равно литра, (английский, горизонтальный японский и т. Д.) И справа побеждает, когда направление равно rtl (персидский, Арабский, иврит и др.).

Проблемы доступности

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

Производительность и доступность

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

Формальное определение

Формальный синтаксис

 статический | родственник | абсолютный | липкий | фиксированный 

Примеры

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

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

HTML
 
Один
Два
Три
Четыре
CSS
 .box {
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: красный;
  белый цвет;
}

#два {
  положение: относительное;
  верх: 20 пикселей;
  слева: 20 пикселей;
  фон: синий;
}
 

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

Элементы, которые расположены относительно друг друга, остаются в обычном потоке документа.Напротив, абсолютно позиционированный элемент выводится из потока; таким образом, другие элементы позиционируются так, как если бы его не было. Абсолютно позиционированный элемент позиционируется относительно своего ближайшего предка (то есть ближайшего предка, который не равен static ). Если позиционированный предок не существует, он позиционируется относительно ICB (начальный содержащий блок — см. Также определение W3C), который является содержащим блоком корневого элемента документа.

HTML
 

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

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

По умолчанию мы покрываем 100% ширины нашего родительского элемента, и мы достигаем высоты нашего дочернего содержимого. Наша общая ширина и высота - это наше содержимое + отступ + ширина / высота границы.

Нас разделяют наши поля. Из-за сворачивания поля мы разделяем ширину одного из наших полей, а не обоих.

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

CSS
 body {
ширина: 500 пикселей;
  маржа: 0 авто;
}

п {
  фон: аквамарин;
  граница: сплошной синий цвет 3px;
  отступ: 10 пикселей;
  маржа: 10 пикселей;
}

span {
  фон: красный;
  граница: сплошной черный 1px;
}

.positioned {
  позиция: абсолютная;
  фон: желтый;
  верх: 30 пикселей;
  слева: 30 пикселей;
} 
Результат

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

Фиксированное позиционирование аналогично абсолютному позиционированию, за исключением того, что содержащий блок элемента является начальным содержащим блоком, установленным окном просмотра , если только какой-либо предок не имеет преобразование , перспективу или , свойство фильтра установлено на что-то другое чем нет (см. Спецификацию преобразований CSS), что затем заставляет этого предка занять место элементов, содержащих блок.Это можно использовать для создания «плавающего» элемента, который остается в одном положении независимо от прокрутки. В приведенном ниже примере поле «Один» зафиксировано на расстоянии 80 пикселей от верхнего края страницы и 10 пикселей от левого края. Даже после прокрутки он остается на том же месте относительно области просмотра.

HTML
 

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis. Vestibulum ante ipsum primis в faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror. Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum.Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nam congue Tortor Eget pulvinar lobortis. Vestibulum ante ipsum primis в faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor toror. Sed tempor nisl a lorem conquat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.

Один
CSS
 .box {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: красный;
  белый цвет;
}

#один {
  положение: фиксированное;
  верх: 80 пикселей;
  слева: 10 пикселей;
  фон: синий;
}

.external {
  ширина: 500 пикселей;
  высота: 300 пикселей;
  переполнение: прокрутка;
  отступ слева: 150 пикселей;
}
 
Результат

Липкое позиционирование

Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Элемент с фиксированным позиционированием считается относительно позиционированным до тех пор, пока он не пересечет заданный порог, после чего он рассматривается как фиксированный, пока не достигнет границы своего родителя. Например …

 #one {позиция: липкая; верх: 10 пикселей; } 

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

Обычно липкое позиционирование используется для заголовков в алфавитном списке. Заголовок «B» будет отображаться сразу под элементами, которые начинаются с «A», пока они не будут прокручены за пределы экрана. Вместо того, чтобы перемещаться за пределы экрана вместе с остальным контентом, заголовок «B» будет оставаться закрепленным в верхней части области просмотра до тех пор, пока все элементы «B» не будут прокручены за пределы экрана, после чего он будет закрыт буквой «C» заголовок и так далее.

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

HTML
 
А
Эндрю В.К.
Аппарат
Arcade Fire
У подъезда
Азиз Ансари
C
Chromeo
Обычный
Свести
Хрустальные замки
Курсив
<

позиция - Код CSS

  • Все объекты
  • Анимации
  • Фоны
  • Коробчатая модель
  • Flexbox
  • Сетка CSS
  • Выбор позиции
  • Переходы
  • Типографика
  • align-content
  • align-items
  • align-self
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-time-function
  • animation
  • background-attach
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background- повторить
  • background-size
  • background
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-bottom
  • border-collapse
  • border-color
  • border-left-color
  • border-left-style
  • border-left-width
  • 90 475 border-left

  • border-radius
  • border-right-color
  • border-right-style
  • border-right-width
  • border-right
  • border-style
  • border-top-color
  • border -top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-top
  • border-width
  • border
  • bottom
  • box-shadow
  • размер коробки
  • прозрачный
  • цвет

Свойство CSS position - Tutorial Republic



ДОМ
HTML5
CSS3
JAVASCRIPT
JQUERY
BOOTSTRAP4
PHP7
SQL
ССЫЛКИ
ПРИМЕРЫ
часто задаваемые вопросы
СНИПЕЦЫ
Онлайн-редактор HTML

СВОЙСТВА CSS

Развернуть все | Свернуть все

  • align-content
  • align-items
  • самоустанавливающееся
  • анимация
    • анимация
    • задержка анимации
    • направление анимации
    • продолжительность анимации
    • режим заливки анимации
    • количество итераций анимации
    • имя-анимации
    • состояние воспроизведения анимации
    • функция времени анимации
  • вид сзади
  • фон
    • фон
    • фон-приставка
    • фон-клипса
    • цвет фона
    • фоновое изображение
    • фон происхождения
    • background-position
    • фон-повтор
    • размер фона
  • граница
    • бордюр
    • нижняя граница
    • цвет нижней границы
    • граница-нижний-левый-радиус
    • граница-нижний-правый-радиус
    • граница снизу
    • ширина-нижняя граница
    • граница-обрушение
    • цвет рамки
    • изображение границы
    • бордюр-изображение-исход
    • повтор изображения границы
    • фрагмент изображения границы
    • источник изображения границы
    • ширина-границы-изображения
    • граница левая
    • цвет левой границы
    • с рамкой слева
    • ширина рамки слева
    • радиус границы
    • граница правая
    • цвет границы справа
    • обрамление справа
    • ширина рамки справа
    • бордюр
    • граница
    • кайма
    • цвет верхней границы
    • граница-верх-левый-радиус
    • граница-верх-правый-радиус
    • с бордюром
    • ширина по верху границы
    • ширина границы
  • низ
  • тень коробки
  • коробка калибровочная
  • сторона подписи
  • прозрачный
  • зажим
  • цвет
  • столбец- *
    • кол-во столбцов
    • столбик-заполнитель
    • колонна-зазор
    • линейка-столбец
    • столбец-линейка-цвет
    • стиль столбца-линейки
    • ширина-правило столбца
    • колонна-пролет
    • ширина столбца
    • колонки
  • содержание
  • счетчик приращения
  • сброс счетчика
  • курсор
  • направление
  • дисплей
  • пустых ячеек
  • шлейф
    • гибкий
    • гибкая основа
    • гибкое направление
    • гибкий поток
    • гибкий рост
    • гибкая термоусадочная
    • гибкая пленка
  • поплавок
  • шрифт
    • шрифт
    • семейство шрифтов
    • размер шрифта
    • регулировка размера шрифта
    • растяжка шрифта
    • стиль шрифта
    • вариант шрифта
    • font-weight
  • высота
  • justify-content
  • слева
  • межбуквенный интервал
  • высота строки
  • в виде списка
    • стиль списка
    • изображение в стиле списка
    • позиция в стиле списка
    • тип списка
  • маржа
    • маржа
    • нижнее поле
    • левое поле
    • поле справа
    • верхнее поле
  • макс. Высота
  • макс. Ширина
  • мин-высота
  • мин. Ширина
  • непрозрачность
  • заказать
  • наброски
    • контур
    • цвет контура
    • контур-офсет
    • контурный стиль
    • ширина контура
  • перелив
  • переполнение-x
  • переполнение
  • набивка
    • набивка
    • обивка нижняя
    • обивка левая
    • обивка правая
    • утеплитель
  • разрыв страницы- *
    • разрыв страницы после

Свойство положения CSS - статическое, относительное, абсолютное и фиксированное позиционирование

от

Свойство CSS position определяет, как элемент будет размещен в документе.Он может иметь 4 значения: статическое (по умолчанию), относительное, абсолютное и фиксированное.

Положение свойства CSS

Версия CSS: CSS 2.1
Значение: статическое | родственник | абсолютный | фиксированный | Наследование
Начальное: статическое
Применимо к: всем элементам
Унаследовано: нет

Понимание значений позиций

значение позиции вверху, слева размещение документа и влияние на другие элементы
статическое NA (не используется) Часть нормального потока документа
относительно Относительно своего нормального положения Часть документооборота, но сдвинутая.Может оставлять некоторое пространство пустым и перекрываться с другими элементами, если сдвиг не равен нулю. За счет его смещения другие элементы не смещаются. Они делают вид, будто этот элемент не сдвинут.
абсолютное Относительно первого относительного / абсолютного позиционированного предка Удалено из нормального потока документа и помещено в его позицию. Будет перекрываться с некоторыми элементами
фиксированный Относительно области просмотра Удалено из обычного потока документа и помещено фиксированным в область просмотра.Будет перекрываться с некоторыми элементами

Верхнее и левое значения по умолчанию

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

Комментарии к свойствам внизу, справа

Мы также можем использовать свойства снизу и / или справа. Это смещение применяется снизу или справа. Также обратите внимание, что bottom: 10px будет означать, что нижняя часть элементов будет на 10 меньше, чем нижняя часть ссылки, и аналогично для права собственности.

Пример - статическое положение

%MINIFYHTMLe259aaf4988b1e7462aa2eb0361816da15%
внешний1
внутренний1 внутренний1 внутренний1 внутренний1 внутренний1 внутренний1
внутренний2 внутренний2 внутренний2 внутренний2 внутренний2 внутренний2

Обратите внимание, что верхний, левый и т. Д. Здесь не применимы. Попробуйте установить top и left для inner1, и вы не увидите разницы.

Пример - положение относительно

%MINIFYHTMLe259aaf4988b1e7462aa2eb0361816da16%
внешний1
внутренний1 внутренний1 внутренний1 внутренний1 внутренний1 внутренний1
внутренний2 внутренний2 внутренний2 внутренний2 внутренний2 внутренний2

Несколько замечаний:

  1. inner1 div сдвинут. Но не влияет на позицию inner2 в нормальном потоке документа.
  2. inner1 смещение вызывает некоторое свободное пространство и некоторое перекрытие.
  3. Если установлено, укажите top, left 0 для innner1 div, он будет действовать как статический.

Пример - абсолютное положение

%MINIFYHTMLe259aaf4988b1e7462aa2eb0361816da17%
внешний1
внутренний1 внутренний1 внутренний1 внутренний1 внутренний1 внутренний1
внутренний2 внутренний2 внутренний2 внутренний2 внутренний2 внутренний2

Несколько замечаний:

  1. inner1, являющийся положением: absolute, будет позиционироваться относительно первого предка с положением relative или absolute.Этот предок - внешний div.
  2. В нем нет предка с относительной или абсолютной позицией, абсолютные элементы размещаются относительно тела.
  3. Div inner1 не является частью нормального потока документов и, следовательно, удаляется из обычного потока. вы можете видеть, что следующий элемент (inner2) был размещен, как будто inner1 не существует.

Пример - фиксированная позиция

%MINIFYHTMLe259aaf4988b1e7462aa2eb0361816da18%
внешний1
внутренний1 внутренний1 внутренний1 внутренний1 внутренний1 внутренний1
внутренний2 внутренний2 внутренний2 внутренний2 внутренний2 внутренний2

Несколько замечаний:

  1. Даже при прокрутке фиксированный элемент остается неподвижным. Это положение относительно области просмотра.
  2. Мы также можем использовать нижние, правые значения для его размещения.
  3. Фиксированный элемент не является частью нормального потока документов и поэтому удаляется из обычного потока.вы можете видеть, что следующий элемент (inner2) был размещен, как будто inner1 не существует.

Спецификация

Свойство позиции CSS

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

Вы можете перемещать элементы и размещать их там, где хотите.

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

У нас есть одно основное свойство CSS: позиция .

Может иметь 5 значений:

  • статический
  • родственник
  • абсолютное
  • фиксированный
  • липкий

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

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

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

Если вы установите position: relative для элемента, теперь вы можете позиционировать его со смещением, используя свойства

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

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

  

Тест

с некоторым CSS, чтобы дать некоторые цвета и отступы, но не влияет на позиционирование:

  .parent {
  цвет фона: # af47ff;
  отступ: 30 пикселей;
  ширина: 300 пикселей;
}

.child {
  цвет фона: # ff4797;
  отступ: 30 пикселей;
}

.box {
  цвет фона: # f3ff47;
  отступ: 30 пикселей;
  граница: 2 пикселя с точками # 333;
  семейство шрифтов: курьер;
  выравнивание текста: центр;
  font-size: 2rem;
}  

вот результат:

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

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

Например:

  .box {
  / * ... * /
  положение: относительное;
  верх: -60 пикселей;
}  

Отрицательное значение сверху заставит коробку двигаться вверх относительно своего контейнера.

или

  .box {
  / * ... * /
  положение: относительное;
  верх: -60 пикселей;
  слева: 180 пикселей;
}  

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

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

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

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

Помните, при относительном позиционировании мы заметили, что пространство, изначально занимаемое элементом, сохранялось, даже если его перемещали?

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

  .box {
  / * ... * /
  позиция: абсолютная;
}  

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

 .box {
  / * ... * /
  позиция: абсолютная;
  верх: 0px;
  слева: 0px;
}  

или

  .box {
  / * ... * /
  позиция: абсолютная;
  верх: 140 пикселей;
  слева: 50 пикселей;
}  

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

Это означает, что если мы добавим position: relative к элементу .child и установим top и left равным 0, поле не будет расположено в верхнем левом поле окна , а скорее он будет расположен в координатах 0, 0 .детский :

  .child {
  / * ... * /
  положение: относительное;
}

.box {
  / * ... * /
  позиция: абсолютная;
  верх: 0px;
  слева: 0px;
}  

Вот (как мы уже видели) . Ребенок статический (по умолчанию):

  .child {
  / * ... * /
  положение: статическое;
}

.box {
  / * ... * /
  позиция: абсолютная;
  верх: 0px;
  слева: 0px;
}  

Как и для относительного позиционирования, вы можете использовать z-index , чтобы изменить размещение оси z.

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

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

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

  .box {
  / * ... * /
  положение: фиксированное;
}  

  .box {
  / * ... * /
  положение: фиксированное;
  верх: 0;
  слева: 0;
}  

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

Липкое позиционирование

Хотя указанные выше значения существуют уже очень давно, этот был введен недавно и до сих пор относительно не поддерживается (см. Caniuse.com).

Компонент iOS UITableView - это то, что приходит на ум, когда я думаю о позиции : липкое . Вы знаете, когда вы прокручиваете список контактов и первая буква наклеивается наверх, чтобы вы знали, что просматриваете контакты этой конкретной буквы?

Мы использовали JavaScript, чтобы имитировать это, но это подход, принятый CSS, чтобы сделать это изначально.

Свойства позиции CSS

Значения свойства position:

Position: static

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

Положение: относительное

  • Изменяет положение по сравнению с его нормальным положением.
  • Позиция: относительная, задается с использованием свойств top, right, bottom и left.

Position: fixed

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

Позиция: абсолютная

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

Примечание: Элемент «position» - это элемент, положение которого не является статическим.

Пример: демонстрация свойства позиции




Position property

Этот элемент div имеет статическое положение.

Этот элемент div имеет относительное положение.

Этот элемент div имеет абсолютную позицию

Этот элемент div имеет фиксированную позицию.


Выход:

.