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

«Статическое» не означает, что элемент сохраняет постоянное расположение на странице. По сути более подходящим названием было бы «обтекающее». По умолчанию расположение элементов HTML означает, что они не перекрывают друг друга на странице: каждый элемент отталкивает все остальные элементы вокруг, подстраиваясь под размер, разрешение и соотношение сторон устройства, на котором он отображается.

Давайте рассмотрим простой пример содержимого страницы:

<p><img src="assets/images/pericles.jpg" style="float: left;" alt="Bust of Pericles">
Pericles was a prominent statesman, orator, and naval general of Athens
during the city-states's <q>Golden Age</q>, from 448BCE until his death
in 429.  Pericles was a promoter of the arts (particularly plays),
architecture (it was under his patronage that the Parthenon was built),
and the principles of democracy, but he was also an instigator of war:
Pericles is widely held to be responsible for maneuvering Athens
into the disastrous Peloponnesian  War with Sparta.</p>

Который отображается следующим образом:

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

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

Элементам, к которым применяется запись position: static или у которых статическое расположение по умолчанию, не могут применяться свойства верхнего, левого, нижнего и правого краев. Статические элементы можно передвигать, изменяя значения внешнего и внутреннего отступов или смещая их положение в коде HTML веб-страницы. Это очень хорошо подходит и просто в использовании для большинства дизайнов.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селектора псевдоэлемента
• Использование селектора элемента в CSS
• Использование изображений в формате DataURI