Есть ли разница между статическим элементом и относительным элементом с левым и верхним значением, равным нулю?

Ответ 1

1. Элемент Relative может использовать z-index, а static - нет.

2. Top, right, bottom, left не влияют на позиционированный элемент static.

3. IE7 нуждается в позиции relative, чтобы элемент использовал overflow. Прошлый вопрос относительно этой проблемы. Также пост от Джонатана Снука об этом.

Ответ 2

Единственное отличие, о котором я могу думать, это то, что

элемент с position:relative будет уважать свойство z-index.

Демо

Edit:

Как уже упоминалось, свойства смещения top,left,bottom,right применяются только к расположенным элементам (а не к статическим)

Вот одно (неинтуитивное) приложение использования этого смещения в относительно позиционированных элементах, что также может повлиять на вас при принятии решения об установке position:relative для элемента.

Примечание: это не будет выражаться, если смещение равно 0 (т.е. top:0;left:0), как указано в вопросе, но это важно для использования при использовании position:relative.

Из спецификация:

Смещение окна (B1) таким образом не влияет на поле (B2), которое следует: B2 дается позиция, как если бы B1 не были смещены, а B2 не переопределяется после смещения B1. Это означает, что относительный позиционирование может привести к перекрытию ящиков.

Взгляните на эту демонстрацию

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

Ответ 3

вы можете опустить

left: 0;
top: 0;

потому что они по умолчанию имеют значение position:relative и нет, нет никаких реальных различий, за исключением того, что вам не нужно менять его на relative, если вам не нужно использовать top, left или z-index значения, и если вам не нужно иметь абсолютно позиционированные divs внутри него

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

Ответ 4

Позиционированные элементы с вычисленными z-индексами, отличными от "авто", создают контексты стекирования (w3 spec). Менее клиническое определение поведения контекстов стеков доступно в MDN.

Элементы сами отображаются в другом порядке рисования (сравните №3 с другими). ​​

Ответ 5

разница между позицией: (Демо)

position : static не принимает значения left и top. статическое использование для переопределения позиции относительно или абсолютное для некоторого сценария. как вы можете видеть на рис.

position : relative принимают левый и верхний, но относительно его нормального положения. если нет предыдущего элемента, чем его элемент родительского элемента формы, как вы можете видеть на рис..

position : absolute принять left и top, но относительно родительского (если position: relative определить родительский элемент), как вы можете видеть на рис.

Итак, Вопрос: "Есть ли разница между блоком с относительным и статическим?" Ответ: Да:)

&

Есть ли разница между блоком с

position: static;

и

position: relative;
left: 0;
top: 0;

Ans: No

Ответ 6

Существуют два очень больших различия между позиционированием Static и Relative. Большинство из них наиболее идентифицируются по названию компонентов. Как вы думаете, позиционированный компонент Static будет статичным! Вы не сможете контролировать положение компонента, использующего Static, с top, left, bottom и правым, а позиционируется путем размещения под последним компонентом.

Относительно, с другой стороны, это гораздо лучшее решение, и гораздо более полезно. Вы можете, в отличие от позиционирования Static, использовать top, left, right и bottom, но по-прежнему помещается под последним компонентом.

Кроме того, вы не можете управлять Z-Index компонента Static ly. Однако это не относится к позиционируемому компоненту Relative ly. Использование Z-Index на Static ly позиционированном компоненте вообще не повлияет и просто поместит компонент под компонентами, которые вызываются перед ним.

Static позиционирование во многом похоже на позиционирование Relative без управления. Если вы просто хотите разместить несколько компонентов один за другим, не заботясь о том, как они будут расположены. Например: http://jsfiddle.net/u62GV/ Затем используйте Static. Но если вы хотите, чтобы несколько компонентов размещались один за другим, с возможностью позиционирования компонентов (аналогично абсолютным), я бы рекомендовал Relative, как видно из следующего примера: http://jsfiddle.net/AhLF5/.

Возможно, эти ссылки могут вам помочь:

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

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

http://www.codecademy.com/forum_questions/513b0a64ee849413590009f9

Ответ 7

1. Static

position: static;

2. Относительная

position: relative;

3. Абсолютное

position: absolute;

Разница заключается в следующем:

1 - Позиция основана на окне просмотра браузера, это означает, что не имеет значения, прокручиваете ли вы бесконечно в любом направлении, потому что базовые значения все еще являются окнами просмотра.

2 - Позиция основана на родительском видовом экране, поэтому, если вы прокрутите в любом направлении, возможно, элемент исчезнет (кроме того, если родительский статический: D)

3 - Позиция основана на ближайшем размещенном родительском видовом экране, любом элементе с позицией (статическим/относительным/абсолютным).

Надеюсь, это не смущает вас.

LMAO