Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Position-absolute-relative

Позиционирование блоков

Благодаря позиционированию блоков мы можем расположить любой блок где угодно на страничке HTML документа. Существует два основных типа позиционирования, которыми пользуются веб-разработчики — это абсолютное и относительное позиционирование.

Абсолютное позиционирование

Вообще для позиционирования какого-либо блока в CSS применяют свойство position. Для абсолютного позиционирования к этому свойству добавляют значение ABSOLUTE. После этого для указания координат используют знакомые уже вам ключевые слова: top,right,bottom,left. Координаты задаются относительно всего документа HTML. Рассмотрим небольшой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" >
  <title>position:absolute</title>
<style type="text/css">
body { 
margin: 0; /* Убираем отступы */
   }
p.logotip {
	position:absolute;
	top:100px;
	left:150px;
	border:#3C6 1px  solid
}  
</style>
 </head> 
 <body>   
   <p class="logotip">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
 sed diem nonummy nibh euismod tincidunt ut lacreet
 dolore magna aliguam erat volutpat. Ut wisis enim ad minim
 veniam, quis nostrud exerci tution ullamcorper 
suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
   </p>  
 </body>
</html>

В результате у меня получилось:

position:absolute

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

Относительное позиционирование

При относительном позиционировании положение блока задаётся относительно его исходного места. К свойству position применяют значение relative. Координаты задаются также, как и при абсолютном позиционировании:

.shapka{
border:1px solid red;
position:relative;
top:300px;
left:150px;
}

Думаю, вы без проблем усвоите данный урок, а в следующем уроке мы поговорим с вами об плавающих блоках и свойстве float.



наверх