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

С помощью абсолютного позиционирования можно расположить любой объект в любом месте экрана.

Для примера возьмем такое изображение и разместим его так:

Пример абсолютного позиционирования

Абсолютное позиционирование задается свойством 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);
}

*Для наглядности, результат вынесен на отдельную страницу.

Управление списками

Обучение

Реклама в разделе: