5.2. Статичное и относительное позиционирование
По умолчанию свойство position установлено в static, то есть элементы отображаются в том порядке, в котором они были указаны в вашем HTML-документе, в соответствии с нормальным потоком HTML-страницы.
На статично позиционированные элементы не влияют свойства top, left, right и bottom.
Чтобы понять разницу, создадим несколько основных стилей CSS:
001 /* Применить границу ко всем элементам */
002 div { border: 1px solid gray; }
003
004 /* Установить произвольные значения ширины и положения */
005 #A { width: 100px; top: 25px; left: l00px; }
006 #B { width: 215px; top: 50px; }
007 #C { width: 250px; top: 50px; left:25px; }
008 #D { width: 225px; top: 65px; }
009 #E { width: 200px; top: 70px; left:50px; }
Граница 1pxsolid gray применена ко всем элементам div, поэтому теперь легче увидеть фактические размеры каждого HTML-элемента при отображении его в браузере.
Далее мы применим свойства position: static и position: relative к элементу div, чтобы увидеть разницу между статичным и относительным позиционированием.
По умолчанию свойство position установлено в static, то есть элементы отображаются в том порядке, в котором они были указаны в вашем HTML-документе, в соответствии с нормальным потоком HTML-страницы.
На статично позиционированные элементы не влияют свойства top, left, right и bottom.
Чтобы понять разницу, создадим несколько основных стилей CSS:
001 /* Применить границу ко всем элементам */
002 div { border: 1px solid gray; }
003
004 /* Установить произвольные значения ширины и положения */
005 #A { width: 100px; top: 25px; left: l00px; }
006 #B { width: 215px; top: 50px; }
007 #C { width: 250px; top: 50px; left:25px; }
008 #D { width: 225px; top: 65px; }
009 #E { width: 200px; top: 70px; left:50px; }
Граница 1pxsolid gray применена ко всем элементам div, поэтому теперь легче увидеть фактические размеры каждого HTML-элемента при отображении его в браузере.
Далее мы применим свойства position: static и position: relative к элементу div, чтобы увидеть разницу между статичным и относительным позиционированием.
