Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Относительное позиционирование блоков

С помощью относительного позиционирования блок смещают относительно его местоположения в нормальном потоке. Чтобы блок позиционировать таким образом (относительно нормального потока) используется свойство position:relative. Давайте рассмотрим пример. Пусть у нас есть 3 блока, размещённых в нормальном потоке:

<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №1</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №2</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №3</div>

Выглядят эти блоки так:

Блок №1
Блок №2
Блок №3

Теперь поработаем со средним блоком, однако перед этим немного информации. Смещение блока при относительном позиционировании задаётся при помощи следующих четырёх свойств:

  1. left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
  2. right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
  3. top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
  4. bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;

Задаём среднему блоку смещение, относительно контейнера.

<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №1</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px; position:relative; left:30px; bottom:20px;">Блок №2</div>
<div style="border-color:red; border-width:thin; border-style:solid; width:200px; height:50px;">Блок №3</div>

И вот что мы получаем:

Блок №1
Блок №2
Блок №3

На этом всё.


<<Предыдущая | В раздел | Следующая>>