Разница между статическим и относительным позиционированием

В чем разница между статическим (по умолчанию) и относительным позиционированием в CSS?

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

Относительное позиционирование позволяет указать конкретное смещение ( leftи topт. Д.) , Которое относится к нормальному положению элемента в потоке HTML. Итак, если у меня есть текстовое поле внутри, divя мог бы применить относительное позиционирование к текстовому полю, чтобы оно отображалось в определенном месте относительно того, где оно обычно размещалось бы в div:

Существует также абсолютное позиционирование - при котором вы указываете точное местоположение элемента относительно всего документа или следующего относительно позиционированного элемента дальше по дереву элементов :

И когда position: relativeприменяется к родительскому элементу в иерархии:

Обратите внимание на то, как наш элемент с абсолютной позицией связан с относительно позиционированным элементом.

И, наконец, исправлено. Фиксированное позиционирование ограничивает элемент определенной позицией в области просмотра, которая остается на месте во время прокрутки:

Вы также можете наблюдать поведение, при котором элементы с фиксированным расположением не вызывают прокрутку, потому что они не считаются связанными окном просмотра:

В то время как абсолютно позиционированные элементы по-прежнему связаны окном просмотра и будут вызывать прокрутку:

..если, конечно, ваш родительский элемент не использует overflow: ?для определения поведения прокрутки (если есть).

При абсолютном позиционировании и фиксированном позиционировании элементы удаляются из потока HTML.

Вы можете увидеть простой обзор здесь: W3School

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

В ответ на вопрос «почему CSS по-прежнему реализует position: static;» в одном сценарии использование position: relative для родительского элемента и position: absolute для дочернего элемента ограничивает ширину масштабирования дочернего элемента. В системе горизонтального меню, где у вас могут быть «столбцы» ссылок, использование «width: auto» не работает с относительными родителями. В этом случае изменение его на «статический» позволит изменять ширину в зависимости от содержимого внутри.

Я потратил несколько часов на размышления, почему я не могу настроить свой контейнер в зависимости от количества содержимого в нем. Надеюсь это поможет!

Относительное положение позволяет использовать для позиционирования верхний / нижний / левый / правый угол. Static не позволит вам сделать это, если вы не используете параметры маржи. Есть разница между Top и margin-top.

Вам не нужно часто использовать статику, поскольку она по умолчанию

Относительное положение относительно нормального потока. Относительное положение этого элемента (со смещениями) определяется положением, в котором этот элемент обычно находился бы, если бы не перемещался.

У Мэтью Эбботта есть действительно хороший ответ.

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

Относительно расположенные элементы перемещают смещения от того места, где они обычно находятся в HTML.

Абсолютно позиционированные элементы перемещают смещения от документа или следующего относительно позиционированного элемента вверх по дереву DOM.

Статический: элемент с СТАТИЧЕСКИМ позиционированием - это то, что мы получаем по DEFAULT (нормальное позиционирование объектов).

Относительный: относительно текущего положения, но может быть перемещен. Или ОТНОСИТЕЛЬНО позиционированный элемент позиционируется относительно СЕБЯ.

static и relative - это атрибуты позиции. relative используется для многих целей. Ни за одного. Но имейте в виду, что статическое и относительное не вредит нормальному документообороту Html. static - это позиция по умолчанию, когда вы пишете любой элемент в Html. Если элемент имеет относительное положение, этот элемент можно расположить относительно его исходного места. если вы хотите отрегулировать элемент из небольших пространств, используйте относительное положение, чтобы вам не нужно было добавлять поля, отступы и т. д., если элемент имеет относительную позицию и у него есть дочерний элемент. Здесь мы можем проводить измерения относительно его родителя. Если вы добавляете ширину 10% к дочернему элементу, это означает (ширина + отступ) x10%. Но вы не добавляете относительное ключевое слово, вы получаете ширину 10%. Помимо этого, наиболее важным использованием родственника является; вы можете разместить любой элемент поверх него.