Свойства смещения CSS и статическое положение

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

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

3 6
css positioning

3 ответа:

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

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

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

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

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

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

Резюме

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

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

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

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

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

9

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

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

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

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

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

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

1

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

0