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

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

  Используя абсолютное позиционирование можно поместить любой объект в нужном месте экрана.
  Например, возьмем какое-нибудь изображение и разместим его.
  Для абсолютного позиционирования применяется свойство position: absolute; затем указываются отступы:
  • top - сверху
  • right - справа
  • bottom - снизу
  • left - слева
и все размеры элемента для позиционирования:
  • width - ширина
  • height - высота
  Затем помещаем изображение на фон позиционируемого элемента. Для этого указываем свойство background-image: url(путь_к_картинке);
  Добавляем сам элемент в код страницы. Для этого можно пользоваться пустыми тегами: <span> или <div>. Если не знаете как это делать, то прочитайте общие принципы создания правил CSS.
HTML-код CSS-код
<html>
<head>
<title>Пример CSS</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
...
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="abs"></div>
<body>
</html> 		#abs {
position: absolute;
top: 220px;
right: 120px;
width: 200px;
height: 200px;
background-image: url(img/tack.gif);
}
Пример абсолютного позиционирования.