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

После задания относительного расположения и любого из этих свойств, происходит следующее:

(1) Элемент, которому установлены эти свойства, как бы исчезает из содержимого страницы, при этом место, которое он занимал при статическом расположении, сохраняется за ним.

(2) Элемент отображается согласно заданным ему значениям верхнего, левого, нижнего и/или правого углов относительно его изначального статического расположения.

Теперь покажем, как действует относительное расположение, на примере из предыдущего урока об использовании расположений CSS:

<p><img src="assets/images/pericles.jpg" style="position: relative; top: 2em; right: 4em;" 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>

Этот код создаст следующую разметку:

Как Вы можете видеть, изображение сместилось на 2em вниз 4em влево относительно его первоначального расположения. Пространство, в котором раньше находилось изображение, сохранилось за ним, и элемент изображения теперь перекрывает текст и частично вылазит за пределы страницы.

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

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

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

• Использование расположений CSS: значение по умолчанию «статическое»
• Использование селектора псевдоэлемента
• Использование селектора элемента в CSS