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


89

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


21
Разница в том , что вы часто типа position: relative, и вы никогда не набрать position: static:)
thirtydot

Ответы:


168

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

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

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

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

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

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

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

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

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

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

фиксированные элементы также выводятся из потока HTML, но не ограничиваются окном просмотра и не прокручиваются вместе со страницей.

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

фиксированные элементы не влияют на прокрутку.

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

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

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

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


4
Хороший ответ, но (для относительного положения) разве смещение не основано на нормальном положении элемента?
Baztoune

4
Я согласен с Базтуном, это определение относительно позиционированных элементов вводит в заблуждение. A staticи relativeelement одинаковы, за исключением того, что в последнем случае вы можете переставить его относительно его исходной позиции , а не относительно содержащего его элемента - вот где это нужноabsolute . Также, как и любой элемент, позиционируемый с использованием значения, отличного от того, которое staticвы можете использовать z-index.
Райан Уильямс

Я переработал этот ответ, чтобы более точно определить относительное позиционирование, и включил изображения, чтобы продемонстрировать различные типы положения.
Мэтью Эбботт

3
Интересно, почему CSS все еще реализован position: static;вместо того, чтобы просто заменить его position: relative;по умолчанию? Если кто-то не хочет позиционировать элемент иначе, top: 0;а left: 0;потом не будем этого делать, верно? Есть ли основная причина, по которой position: static;все еще требуется как часть CSS?
cram2208

8
@ cram2208, поскольку relative заставляет дочерние узлы с абсолютным позиционированием позиционироваться относительно них, static позволяет абсолютно позиционированным дочерним элементам игнорировать свое положение и располагаться относительно ближайшего относительного позиционированного элемента. Это важная концепция
Felype

7

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

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


29
w3schools ... Я не буду отрицать это, но вы должны жить со стыдом.
Майлс Грей

4
Между тем, в 2017 году W3Schools не так плох, как раньше (он все еще не идеален, но они серьезно отнеслись к негативной реакции сообщества и фактически улучшились).
Priidu Neemre

Между тем, в 2018 году W3Schools все еще не так плох, как раньше, но им жаль, что их репутация даже сегодня все еще такова, что упоминание первого вышеупомянутого комментария другим разработчикам все еще вызывает классический смешок ... назад в мои дни ... W3School .... первые впечатления эй ...
redfox05

7

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

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


Это ответ! Все говорят профессионалам только об относительном позиционировании, упускают из виду суть вопроса: в чем разница.
Bartis

5

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

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


2

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


2

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

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

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

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


0

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

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


0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.