Блог

Являются ли свойства смещения (слева, сверху, снизу, справа) только для нестатических позиций?

Могут ли они быть применены к статически расположенному элементу? Если да, то чем они отличаются от применения к нестатически расположенным элементам?

для смещения элемента его положение должно быть position:relative

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

Когда элемент смещен, а не перемещен?

при фактическом использовании смещения position: relative; элемент не удаляется из потока, и действительно, пространство, которое элемент занимал бы, если бы он оставался статичным (по умолчанию), по-прежнему зарезервировано для него, поэтому вы просто сместили его с исходного положения. Любой следующий за ним элемент появится там, где он появился бы, даже если бы вы не смещали его предшественника — как в этом примере

Перемещение, а не смещение

Однако, если вы действительно хотите переместить элемент, то его необходимо удалить из потока, чтобы для него не было зарезервировано места, и тогда вы используете position:absolute; or fixed .. в этом разница

Краткие сведения

• static используется по умолчанию, и вы просто используете поля для его перемещения, при этом будут игнорироваться координаты и z-индекс

• relative это зарезервированное пространство, координаты будут смещать его от исходного пространства

• absolute элемент будет удален из потока, а координаты будут вычислены в соответствии с его содержащим блоком, который является ближайшим относительно расположенным предком (или body элементом, если не существует относительно расположенных предков)

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

и, наконец, элемент не будет принимать a, z-index если его позиция по умолчанию является статической, поэтому position: relative; без применения каких-либо координат аналогично static , но это полезно для z-индексации и является содержащим блоком для абсолютно позиционированных элементов

Нет особого смысла применять их к position: static элементам, поскольку они статичны.

Чтобы сдвинуть статический элемент на определенную величину, вы можете изменить его position свойство на position: relative; .

Теперь вы можете перемещать его с помощью top , left и т.д.

Существует еще несколько типов position , а именно position: fixed и position: absolute .

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

absolute позиционирует элемент относительно документа и игнорирует все правила компоновки. Установка его положения определяет, где оно расположено в документе.

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