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.- Другие 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: 000Z»>10 окт. 2022 г., 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
- DIV #5: (
- РАЗДЕЛ #1: (
z-индекс
: 5)
- РАЗДЕЛ #2: (
HTML
<дел>Элемент разделения №1
<код> положение: относительное;
z-индекс: 5; код>Элемент разделения №2
<код> положение: относительное;
z-индекс: 2; код>
Элемент разделения №4
<код> положение: относительное;z-индекс: 6; код>