Css позиционирование position: background-position — CSS | MDN

object-position — CSS | MDN

CSS-свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока элемента. На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.

Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство object-fit.

/* значения <position> */
object-position: center top;
object-position: 100px 50px;
/* Глобальные значения */
object-position: inherit;
object-position: initial;
object-position: unset;

Значения

<position> (en-US)

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

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

object-position = 
<position>

"><position> =
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) start | (en-US) end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) x-start | (en-US) x-end | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) y-start |

(en-US) y-end | (en-US) <length-percentage> ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom | (en-US) y-start | (en-US) y-end ] (en-US) <length-percentage>? (en-US) ] (en-US) | (en-US)
[ (en-US) center |
(en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US) [ (en-US) center | (en-US) [ (en-US) start | (en-US) end ] (en-US) <length-percentage>? (en-US) ] (en-US)

"><length-percentage> =
<length> | (en-US)
<percentage>

Позиционирование изображений

HTML

Здесь мы видим HTML, содержаний два <img>-элемента, отображающие логотипы MDN.

<img src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
<img src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
CSS

CSS содержит стандартные стили для самого <img>-элемента, а также отдельные стили для обоих изображений.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}
#object-position-1 {
  object-position: 10px;
}
#object-position-2 {
  object-position: 100% 10%;
}

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

Результат
Specification
CSS Images Module Level 3
# the-object-position

BCD tables only load in the browser

with JavaScript enabled.
Enable JavaScript to view data.
  • Другие CSS-свойства, связанные с изображениями: object-fit, image-orientation (en-US), image-rendering (en-US), image-resolution (en-US).

Last modified: , by MDN contributors

background-position-x — CSS | MDN

Свойство background-position-x — это CSS — свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства background-origin.

Значение этого свойства отменяется любой декларацией background или коротким свойством background-position применёнными после его объявления.

/* Keyword values */
background-position-x: left;
background-position-x: center;
background-position-x: right;
/* <percentage> values */
background-position-x: 25%;
/* <length> values */
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;
/* Side-relative values */
background-position-x: right 3px;
background-position-x: left 25%;
/* Multiple values */
background-position-x: 0px, center;
/* Global values */
background-position-x: inherit;
background-position-x: initial;
background-position-x: unset;

Свойство background-position-x принимает одно или несколько значений, разделённых запятыми.

Значения

left

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

center

Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.

right

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

<length>

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

<percentage>

Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.

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

background-position-x = 
[ (en-US) center |
(en-US) [ (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US)? (en-US) <length-percentage>? (en-US) ]! ] (en-US)# (en-US)

"><length-percentage> =
<length> | (en-US)
<percentage>

Specification
CSS Backgrounds and Borders Module Level 4
# background-position-longhands

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • background-position
  • background-position-y (en-US)
  • background-position-inline
  • background-position-block
  • Использование множественных фонов (en-US)

Last modified: , by MDN contributors

Контекст стека — CSS: Каскадные таблицы стилей

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

В предыдущей статье этого руководства «Использование z-индекса» мы показали, что на порядок рендеринга определенных элементов влияет их значение z-индекса . Это происходит из-за того, что эти элементы имеют специальные свойства, которые заставляют их формировать контекст стека .

Контекст стека формируется в любом месте документа любым элементом в следующих сценариях:

  • Корневой элемент документа ( ).
  • Элемент с позицией значение абсолютное или относительное и z-индекс значение отличное от авто .
  • Элемент с позицией значение фиксированный или фиксированный (фиксированный для всех мобильных браузеров, но не для старых настольных браузеров).
  • Элемент, являющийся дочерним элементом гибкого контейнера, со значением z-index , отличным от auto .
  • Элемент, являющийся дочерним элементом контейнера сетки , со значением z-index , отличным от auto .
  • Элемент со значением непрозрачности
    меньше 1 (Непрозрачность см. в спецификации).
  • Элемент со значением mix-blend-mode , отличным от normal .
  • Элемент с любым из следующих свойств со значением, отличным от none :
    • преобразование
    • фильтр
    • фоновый фильтр
    • перспектива
    • клип-путь
    • маска / маска-изображение / маска-граница
  • Элемент с изоляцией значение изолировать .
  • Элемент со значением will-change , указывающим любое свойство, которое создаст контекст стека для неначального значения (см. этот пост).
  • Элемент с содержит значение layout или paint или составное значение, которое включает любое из них (т.е. содержит: strict , содержат: содержимое ).

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

Вкратце:

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

Примечание: Иерархия контекстов наложения является подмножеством иерархии элементов HTML, поскольку только определенные элементы создают контексты наложения. Мы можем сказать, что элементы, которые не создают свои собственные контексты стека, ассимилировал родительским контекстом стека.

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

  • Корень
    • РАЗДЕЛ #1
    • РАЗДЕЛ #2
    • РАЗДЕЛ #3
      • РАЗДЕЛ #4
      • РАЗДЕЛ #5
      • РАЗДЕЛ #6

Важно отметить, что DIV № 4, DIV № 5 и DIV № 6 являются дочерними элементами DIV № 3, поэтому размещение этих элементов полностью решается в DIV № 3. Как только наложение и рендеринг в DIV #3 завершены, весь элемент DIV #3 передается для наложения в корневой элемент по отношению к его родственному элементу DIV.

DIV № 4 отображается в DIV № 1, поскольку z-индекс DIV № 1 (5) действителен в контексте стека корневого элемента, а z-индекс DIV № 4 (6) действителен в контексте стека DIV №3. Таким образом, DIV № 4 находится под DIV № 1, потому что DIV № 4 принадлежит DIV № 3, который имеет более низкое значение z-index.

По той же причине DIV #2 ( z-index : 2) отображается под DIV#5 ( z-index : 1), потому что DIV #5 принадлежит DIV #3, который имеет более высокий z-index ценность.

Z-индекс DIV #3 равен 4, но это значение не зависит от z-индекса DIV #4, DIV #5 и DIV #6, поскольку оно принадлежит другому контексту стека.

Простой способ определить порядок рендеринга сложенных элементов вдоль оси Z состоит в том, чтобы думать о нем как о своего рода «номере версии», где дочерние элементы являются младшими номерами версий под номерами основных версий их родителей. Таким образом, мы можем легко увидеть, как элемент с z-индексом 1 (DIV № 5) располагается над элементом с z-индексом 2 (DIV № 2) и как элемент с z-индексом 6 (DIV № 4) располагается под элементом с z-индексом 5 (DIV № 1).

В нашем примере (отсортированы по окончательному порядку рендеринга):

  • Корень
    • РАЗДЕЛ #2: ( z-индекс : 2)
    • DIV #3: ( z-индекс : 4)
      • DIV #5: ( z-index : 1), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4.1
      • DIV #6: ( z-index : 3), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4,3
      • DIV #4: ( z-index : 6), размещенный под элементом ( z-index : 4), что приводит к порядку рендеринга 4,6
    • РАЗДЕЛ #1: ( z-индекс : 5)

HTML

 

Элемент разделения №1

<код> положение: относительное;
z-индекс: 5;
<дел>

Элемент разделения №2

<код> положение: относительное;
z-индекс: 2;
<дел> <дел>

Элемент разделения №4

<код> положение: относительное;
z-индекс: 6;

Элемент разделения №3

<код> позиция: абсолютная;
z-индекс: 4; <дел>

Элемент разделения №5

<код> положение: относительное;
z-индекс: 1;
<дел>

Элемент разделения №6

<код> позиция: абсолютная;
z-индекс: 3;