Абсолютное позиционирование элементов (HTML + CSS)

При создании HTML-страницы элементы позиционируются согласно положению их кода в общем коде страницы. Говоря другими словами, если код блока помещен внутрь кода ячейки таблицы, то и на странице этот блок будет внутри этой ячейки. При таком положении дел невозможно представить, как, допустим, частично наложить один элемент на другой. Однако, это возможно при помощи абсолютного позиционирования элементов. При этом положение элемента определяется не положением его HTML-кода в исходном коде страницы, а его координатами, заданными с помощью CSS-стилей left и top.

Началом координат является левый верхний угол страницы, координаты элемента определяются левым верхним углом элемента. То есть, если у элемента параметры абсолютного позиционирования:

top: 200px; left: 300px;

то расстояние его верхнего края до верхней границы страницы равно 200 пикселей, а расстояние левого края до левой границы страницы — 300 пикселей:

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

Помимо стилей left и top, элементу необходимо также задать стиль position со значением absolute, указывая, что мы хотим применить абсолютное позиционирование. Есть еще один полезный стиль z-index, который позволяет настроить перекрытие элементов при наложении. Элемент с абсолютным позиционированием накрывает все элементы с относительным позиционированием. Если два элемента с абсолютным позиционированием наложены друг на друга, то на передний план выталкивается тот элемент, у которого больше значение стиля z-index.

Рассмотрим пример. Есть каркас страницы на XHTML 1.0 Transitional:

<!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> 
    <title>Главная страница</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
  </head>  
  <body>
 
  </body>
</html>

Разместим в ней красный квадратный блок с абсолютным позиционированием с координатами (50; 50):

<!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> 
    <title>Page</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px;}
    </style>
  </head>  
  <body>
    <div id="layer1"></div>
  </body>
</html>

Аналогично добавим зеленый и синий блок, а также сделаем так, чтобы зеленый блок перекрывал и синий, и красный, указав ему самое большее значение стиля z-index:

<!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> 
    <title>Page</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      #layer1 {width: 150px; height: 150px; background: #f00; position: absolute; left: 50px; top: 50px; z-index: 20;}
      #layer2 {width: 150px; height: 150px; background: #0f0; position: absolute; left: 100px; top: 100px; z-index: 40;}
      #layer3 {width: 150px; height: 150px; background: #00f; position: absolute; left: 150px; top: 150px; z-index: 30;}
    </style>
  </head>  
  <body>
    <div id="layer1"></div>
    <div id="layer2"></div>
    <div id="layer3"></div>
  </body>
</html>

Результат:

Три блока с абсолютным позиционированием

В основном, абсолютное позиционирование применяется при создании различных плавающих панелей: форм, меню, баннеров, окон уведомлений, увеличенных изображений и т.п. Некоторые начинающие веб-мастера пытаются с помощью абсолютного позиционирования разместить основные элементы сайта, например, прижать к нижнему краю подвал страниц. Хотя это иногда и практикуется, но сопровождается большим количеством потенциальных трудностей, поэтому я делать этого не рекомендую.

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

Комментарии

Оставить комментарий »

 
Василий
1 марта 2013, 23:17
#1
 

Спасибо, очень толково обьяснил, я мучаюсь у себя на сайте пытаюсь разместить кнопку справа за контентом попробую задать координаты.

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий