Поиск 

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

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

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

<!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>

Взято с www.html-css.info
Теги: DIV | HTML | Верстка Автор: Kent | Просмотров: 1873 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.83   
  9     Xenta   29     2.86   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1541 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 989 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 861 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1419 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1422 |
Популярные статьи

Сухово-Кобылин А.В.

Среда, Январь 19, 2011 г.
|
Луна | 726 |

Неврозы

Вторник, Июль 27, 2010 г.
|
Луна | 965 |
|
Луна | 4208 |

Александр Македонский

Пятница, Август 27, 2010 г.
|
Луна | 11364 |

Подростковый возраст

Вторник, Июль 20, 2010 г.
|
Луна | 99654 |

Облако тегов