Относительное позиционирование блоков
С помощью относительного позиционирования блок смещают относительно его местоположения в нормальном потоке. Чтобы блок позиционировать таким образом (относительно нормального потока) используется свойство position:relative. Давайте рассмотрим пример. Пусть у нас есть 3 блока, размещённых в нормальном потоке:
Блок №1
Блок №2
Блок №3
Выглядят эти блоки так:
Блок №1
Блок №2
Блок №3
Теперь поработаем со средним блоком, однако перед этим немного информации. Смещение блока при относительном позиционировании задаётся при помощи следующих четырёх свойств:
- left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
- right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
- top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
- bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;
Задаём среднему блоку смещение, относительно контейнера.
Блок №1
Блок №2
Блок №3
И вот что мы получаем:
Блок №1
Блок №2
Блок №3
На этом всё.