HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Как задать абсолютное позиционирование относительно внешнего блока

В этой шпаргалочке расскажу о часто встречающейся задаче задавания абсолютного позиционирования элемента относительно внешнего блока.

Как известно, если элементу задать position:absolute и, допустим, left:100px. То этот отступ в 100 пикселей будет идти от всего документа, т.е. тега body. Чтобы этот отступ шел относительно внешнего блока, надо внешнему контейнеру задать position:relative. Вот и всё =)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Задаем абсолютное позиционирование относительно внешнего блока</title>
<style type="text/css">
.container {
	width:300px;
	height:300px;
	margin:0 auto;
	background:#F00;
	position:relative;
}
.box {
	width:50px;
	height:50px;
	background:#060;
	position:absolute; /* Теперь этот блок будет внутри внешнего контейнера .container */
	left:20px;
	top:20px;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

Метки: ,

Запись опубликована 25.08.2009 в 15:47 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос