Position css позиционирование: Понимание CSS z-index — CSS

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

Прежде чем мы перейдем к пяти свойствам положения — static , относительный , absolute , fixed и sticky — давайте посмотрим, что такое позиционированные элементы и как они работают со свойством top .

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

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

Скриншот двух блоков внутри контейнера

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

Снимок экрана, показывающий расположение одного из блоков

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

Скриншот, показывающий, как один из блоков смещается и разрушает следующий. На том же расстоянии сдвига первый блок толкает второй блок. Вы заметите, что следующий блок теперь имеет уменьшенную высоту, так как он немного выдвинут из контейнера. На первом изображении расположен первый блок. Это означает, что такие свойства, как сверху и снизу (которые используются для позиционирования элементов) могут размещать блок, не затрагивая его окружение. Но такие свойства, как top , нельзя использовать для непозиционированных элементов. Как вы видели во втором блоке, блок не перемещается. Вместо этого он проталкивается, тем самым воздействуя на элемент после него. Эти примеры приводят к следующей сводке: top и bottom являются свойствами, используемыми для изменения положения элементов, а margin-top и margin-bottom используются для выталкивания элементов. На первом изображении показан позиционированный блок с использованием top и слева , а на втором изображении показан непозиционированный блок с использованием margin-top и margin-left .

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

Свойство статическая является значением позиции по умолчанию для каждого элемента. Для таких элементов они размещаются в том порядке, в котором они расположены в документе. Как ни странно, такие элементы не рассматриваются как позиционированные элементы. Это потому, что они размещаются в соответствии с потоком документа и не могут покинуть этот поток. Это означает, что такие свойства, как top , не могут работать с ними. Если вы примените такое свойство как объявление стиля, вы ничего не увидите. Однако такие свойства, как 9Для них можно использовать 0003 margin-* , и, как мы уже видели в нескольких абзацах выше, такие свойства только толкают элемент, тем самым влияя на окружающие элементы.

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

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

Как видно на изображении выше, первый блок занимает всю ширину (поскольку это блочный элемент). Но это еще не все, что касается относительной собственности. Как вы уже догадались, их можно переставить с помощью топ свойство. Когда вы применяете значение 100px к свойству top и left , оно перемещает элемент с верхним расстоянием 100px, начиная с верхней границы, и левым расстоянием 100px от левой границы, как показано ниже:

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

An абсолютная 9Значение 0004 определяет элемент как позиционированный. Разница между этим и относительной позицией заключается в следующем:

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

Абсолютные элементы могут быть ограничены родительским элементом или окно просмотра. Область просмотра является границей по умолчанию. Родительский элемент может стать границей только тогда, когда он имеет относительное положение. Помните, что статические (положение по умолчанию) элементы нельзя позиционировать. Поэтому они не могут служить границей. Но когда вы применяете позицию относительно элемента, он может служить границей для абсолютных позиционированных элементов. Допустим, синий блок имеет абсолютную позицию с левым из 100px , правым из 100px и относительным родителем, вот иллюстрация, показывающая его границу:

09 . граница абсолютных элементов, если есть относительные родители или нет

Как вы заметили, зеленый блок перемещается в верхнюю часть родительского элемента. Это связано с тем, что синий блок удален из потока. Окружающие элементы больше не уважают блок, поскольку он кажется невидимым. Однако в DOM синий блок предшествует зеленому элементу. Он только визуально теряет свой порядок. Синий блок рассматривает ближайший относительный родитель, который он может найти, в качестве своей границы, в противном случае — область просмотра в качестве границы. Если значение 100px применяется к верхнему свойству, подобно относительному значению , перемещается на расстояние 100px от верхней границы границы.

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

.элемент { позиция: липкая; сверху: 0; }

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

Это означает:

• относительный при установке
• фиксированный при соблюдении заданного условия положения (например, top: 0 )
• относительный, когда родитель больше не виден

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

Резюме

Позиция 9Свойство 0004 используется для определения того, как элемент помещается в документ. Позиция по умолчанию для каждого элемента — static , и ирония в том, что статических элементов не считаются позиционированными . Статические элементы размещаются так, как они появляются в DOM, и поэтому top не оказывает на них никакого влияния. Другие типы позиции делают элементы «позиционированными», что позволяет использовать для них такие свойства, как , нижняя .

В этой статье мы увидели подробное объяснение позиции, используемой в CSS, с 5 типами позиции. static — единственное свойство без позиционирования. Другие есть, но они ведут себя по-разному со свойствами позиционирования, такими как сверху , снизу , слева и справа .

Примечания

• Статическое свойство размещает элемент только так, как указано в исходном коде.
• Свойство absolute ограничивает элемент ближайшим родительским элементом или областью просмотра, а также визуально удаляет элемент из потока
• Свойство fixed ведет себя как absolute , но ограничивает элемент только областью просмотра. все это, пока родитель виден.

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