Оглавление

Позиционирование элемента на странице с помощью CSS

С помощью CSS можно указать точное расположение элемента на странице.

 

Решение
CSS дает разработчику возможность абсолютного позиционирования элемента путем указания расстояния от него до верхнего, левого, правого или нижнего края документа. Два блока, изображенных на рис. 9.16, позиционированы абсолютно.

 

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

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

 

Код страницы будет таким:

 
position.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Абсолютное позиционирование</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="position.css" />
  </head>
  <body>
    <div id="box1">Это первый блок. Его расположение 10 пикселов сверху и 20 пикселов 
         слева.</div>
    <div id="box2">Это второй блок. Его расположение 2em снизу и 2em справа.</div>
  </body>
</html>

 

 

position.css

#box1 {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 150px;
  background-color: #B0C4DE;
  border: 2px solid #34537D;
  padding: 10px;
}
#box2 {
  position: absolute;
  bottom: 2em;
  right: 2em;
  width: 150px;
  background-color: #FFFAFA;
  border: 2px solid #CD5C5C;
  padding:  10px;
}

 
Обсуждение
Задание элементу свойства position со значением absolute полностью удаляет его из основного потока элементов страницы. К примеру, при добавлении нескольких абзацев текста в рассмотренный выше документ два блока будут отображаться поверх него, как показано на рис. 9.17.

 

Два абсолютно позиционированных блока больше не принадлежат основному потоку элементов

Рис. 9.17. Два абсолютно позиционированных блока больше не принадлежат основному потоку элементов (DEMO)

 

В HTML-коде документа абзацы располагаются под абсолютно позиционированными элементами div, однако последние удалены из основного потока, поэтому при обработке кода текст начинается непосредственно в верхнем левом углу страницы, как если бы блоков вообще не существовало.

 

Как мы увидим позже в разделе «Создание «резинового» макета с двумя колонками, в котором слева расположено меню, а справа – основная область с контентом», путем добавления внешних и внутренних отступов для других элементов с помощью свойств margin и padding можно создать дополнительное пространство для размещения абсолютно позиционированных элементов. Возможно, из рассмотренного примера это напрямую не следует, но элементы можно абсолютно позиционировать не только по отношению к краям документа (хотя такой подход наиболее широко распространен), но и по отношению к краям родительского элемента.

 

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

 

Позиционирование одного блока по отношению к другому

Рис. 9.18. Позиционирование одного блока по отношению к другому

 

При этом был использован следующий код:

 
position2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  <head>
    <title>Абсолютное позиционирование</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="position2.css" />
  </head>
  <body>
    <div id="box1">Это первый блок. Его расположение 150 пикселов сверху 
       и 100 пикселов слева.
       <div id="box2">Это второй блок. Его расположение 2em снизу 
           и 2em справа от родительского элемента - первого блока.</div>
    </div>
  </body>
</html>

 

position2.css

#box1 {
  position: absolute;
  top: 150px;
  left: 100px;
  width: 400px;
  background-color: #B0C4DE;
  border: 2px solid #34537D;
  padding: 10px;
}
#box2 {
  position: absolute;
  bottom: 2em;
  right: 2em;
  width: 150px;
  background-color: #FFFAFA;
  border: 2px solid #CD5C5C;
  padding: 10px;
}

 


Для большей наглядности присвоим элементу box1 свойство height со значением 300 пикселов:

#box1 {
   position: absolute;
   top: 20px;
   left: 100px;
   width: 400px;
   height: 300px;
   background-color: #B0C4DE;
   border: 2px solid #34537D;
   padding: 10px;
}


Как видно на рис. 9.19, розовый блок теперь целиком располагается внутри синего, а не «вылезает» из него сверху. Такой эффект достигается позиционированием розового блока по отношению к нижнему и правому краям синего блока.

 

Розовый блок отображается внутри синего

Рис. 9.19. Розовый блок отображается внутри синего

 

 

Примечание
Позиционирование от родителя. Важно помнить, что дочерние элементы (box2) могут позиционироваться по отношению к родительскому элементу (box1), только если расположение последнего также задано средствами CSS.
Если для родительского элемента не задано свойство position, дочерний элемент будет позиционироваться по отношению к краям первого позиционированного предка – родителя родителя и т. д. – или в итоге элемента body (иными словами, по отношению к краям документа). В приведенном выше примере при отсутствии позиционирования родительского элемента расположение дочернего элемента будет рассчитываться по отношению к краям документа, поскольку он является предком следующего уровня.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити