• Главная»
  • Уроки»
  • 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
Просмотров: 41721
Правила перепечатки

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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Февраля 2009 23:02
    raferti
    мммдееее. не стоит переводить все подряд! Напомню автору что мы НАХОДИМСЯ в разделе УРОКИ, поэтому и охото получить полноценный урок. А не просто переведенный для галочки пост!
  • 26 Февраля 2009 23:33
    Сергей Патин
    Продолжение следует в течение ближайшего времени! Это пока демо-статья)))
  • 28 Февраля 2009 18:30
    Баяр Жигмитов
    Добрые люди! В последнее время в комментах звучит очень много критики в адрес Евгения. И не всегда она конструктивна. Критикуя - предлагайте. И, уважаемые господа, пожалуйста, не забываем, что ресурс Евгения Попова ориентирован на начинающих. И если Вы преуспели в чём то, и превзошли своего учителя - так, пожалуйста, создайте мощный, конкурентноспособный ресурс и приглашайте нас к себе.
  • 1 Марта 2009 23:47
    Сергей
    Баяр: + 1
  • 11 Марта 2009 22:20
    Gon
    а если вместо картинки позиционировать javascript ?? как тогда? Спасибо..
  • 28 Марта 2009 20:49
    animhotep
    даже зарегалса ради такго :о) СПАСИБА! наконецто нормальное обьяснение зачем нужен relative! Gon, какая разница, всё что в дивах будет там где надо
  • 29 Мая 2009 10:52
    Erema
    Очень хорошая статья для начинающих! Мне очень пригодилась!-))
  • 7 Июля 2014 09:40
    joic
    Очень полезный урок, причем если бы не картинки, то вообще бы может мимо пропустил, но изображения показывают все наглядно, сразу все стало на свои места.
^ Наверх ^