главная / 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> |
Источник: html-css.info
|
|
текущее:
НОВОСТИ
|
