• Главная»
  • Уроки»
  • CSS»
  • Как с помощью CSS спозиционировать один объект относительно другого?

Как с помощью CSS спозиционировать один объект относительно другого?

Элемент страницы с относительным позиционированием дает вам возможность расположить элементы сайта с абсолютным позиционированием в нем.

Чтобы было более понятно приведу наглядный пример:

 

Белый объект с коричневой рамкой расположен относительно страницы, а объекты с коричневой заливкой расположены абсолютно по отношению к нему.

Позиционирование относительно родительского элемента играет большую роль в дизайне страницы.

Посмотрите, что получилось бы, если бы у вас не было такой возможности:

Как же нам реализовать такое позиционирование?

Для начала создадим таблицу с одной ячейкой и одним столбцом. Ширина таблицы в данном случае 400 px, но она может быть произвольной:

<table width="400" border="0">

<tr>

<td>&nbsp;</td>

</tr>

</table>

Пропишем стиль для этой таблицы, в котором укажем толщину и цвет рамки, а также относительное позиционирование таблицы.

 .table_relative {

border: 2px solid #ccc;

position: relative;

}

Внутрь таблицы вставим картинку, предварительно прописав для нее стиль

.img_absolute {

position: absolute;

top: 25px;

right: 12px;

}

...ее мы будем позиционировать относительно родительского элемента, т.е. таблицы

 <table width="400" border="0" class="table_relative">

<tr>

<td><img src="images/abs-pos-home.png" width="70" height="70" class="img_absolute" />

<p>В этом примере мы видим, <br>что картинка расположена<br> с отступом 25 px сверху<br> и отступом 12 px справа<br>относительно родительской таблицы</p>

  </td>

  </tr>

  </table>

Таким образом, вот что у нас получилось:

В этом примере мы видим,
что картинка расположена
с отступом 25 px сверху
и отступом 12 px справа
относительно родительской таблицы

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Сергей Патин
Урок создан: 26 Февраля 2009
Просмотров: 45688
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^