Как с помощью CSS спозиционировать один объект относительно другого?
Элемент страницы с относительным позиционированием дает вам возможность расположить элементы сайта с абсолютным позиционированием в нем.
Чтобы было более понятно приведу наглядный пример:
Белый объект с коричневой рамкой расположен относительно страницы, а объекты с коричневой заливкой расположены абсолютно по отношению к нему.
Позиционирование относительно родительского элемента играет большую роль в дизайне страницы.
Посмотрите, что получилось бы, если бы у вас не было такой возможности:
Как же нам реализовать такое позиционирование?
Для начала создадим таблицу с одной ячейкой и одним столбцом. Ширина таблицы в данном случае 400 px, но она может быть произвольной:
<table width="400" border="0">
<tr>
<td> </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>
Таким образом, вот что у нас получилось:
![]() В этом примере мы видим, |
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Сергей Патин
Урок создан: 26 Февраля 2009
Просмотров: 45688
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.