Задаем позицию HTML элементов с помощью CCS

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

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

Сейчас, все большую популярность (особенно в стиле Web 2.0) набирает без-табличный способ верстки веб страниц на основе CSS свойства position. Даже в некоторых вакансиях я видел основное требование к веб дизайнеру это умение без таблиц верстать HTML код.

Как установить позиционирование элементов

Для установки позиционирования существует CSS свойство position. Оно может принимать одно из пяти значений:

  • static
  • relative
  • absolute
  • fixed
  • inherit

По умолчанию значение этото свойства равно - static. Т.е. если значение свойства position явно не указано, то элемент будет статически позиционирован. Это важно. Значение свойства position не наследуется по-умолчанию. Чтобы значение наследовалось от родительского элемента, необходимо для дочернего элемента явно выставить свойство position равным inherit, например, так:

a.link{
  position: inherit;
}

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

Статическое позиционирование

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

div {position:absolute}
#new {position:static}

В данном случае всем элементам div назначено абсолютное позиционирование. А вот у тех элементов, у которых установлен id="new" позиционирование будет статическим. Грубо говоря, второе правило отменяет первое для некоторых элементов.

Статическое позиционирование означает, что элемент располагается сразу же после элемента, который предшествует ему в структуре документа HTML.

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

Относительное позиционирование - это позиционирование относительно... самого элемента. Как это не странно звучит - это правда.

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

Возможно, что это не совсем понятно. Поэтому, рассмотрим пример: 

 <html>
   <head><title>test positioning</title>
     <style type="text/css">
       #test0{
         position:absolute;
         top:100px;
         left:100px;
         width:200px;
         height:100px;
         border-style:solid;
         border-width:1px;
         border-color:#000;
       }
       #test1{
         position: relative;
         top:-30px;
         left:30px;
         border-style:solid;
         border-width:1px;
         border-color:#000;
         vertical-align: top;
       }
       #test2{
         position: relative;
         bottom:0px;
         left:0px;
         border-style:solid;
         border-width:1px;
         border-color:#000;
       }
     </style>
   </head>
   <body>
     <div id="test0">
     <div id="test1">Это просто тестовый текст</div>
     <div id="test2">Это просто тестовый текст2</div>
     </div>
   </body>
 </html>

В самом верху большого прямоугольника должен располагаться div, у которого id=test1. Но, так как мы задали для него относительное позиционирование (значения top и left), то он отображается на 30 пискселей выше и на 30 пикселей правее (верх сдвинут на -30 и левый край на 30).

Идем дальше. Казалось бы, мы убрали элемент test1. Однако, посмотрите на элемент test2. Он расположен так, как если бы элемент test1 не был бы сдвинут (т.е. был бы статически позиционирован).

Вот это и есть главная особенность динамического позиционирования. Элемент отображается сдвинутым, однако, структура веб документа не меняется.

Что бы задать смещение элемента от его начальной позиции существует четыре свойства: left, right, top, bottom. Эти свойства означают - насколько должен быть сдвинут соответствующий край элемента: левый, правый, верхний, нижний. Значения этих свойств могут быть отрицательными, что значит сдвиг в противоположную сторону (для left и right - влево, для top и bottom - вверх).

Соответственно, нет смысла указывать одновременно свойства top и bottom, так же как left и right. Один из этих параметров будет проигнорирован.

Имейте ввиду, что для ячеек таблиц поведение этих элементов в стандарте CSS 2.1 не определено, поэтому лучше не используйте эти свойства для таблиц.

Может показаться, что применение относительного позиционирования достаточно ограничено. Но далее мы увидим, как можно использовать это свойство.

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

Если для элемента установлено абсолютное позиционирование, то он полностью удаляется из структуры HTML документа. То есть, документ генерируется так, как если бы элемента не существовало. После этого сверху "накладываются" абсолютно позиционируемые элементы.

Для задания положения элемента с абсолютным позиционированием используются все те же четыре свойства: left, top, bottom, right. Вот только смысл у этих свойств отличается от их смысла при относительном позиционировании. При абсолютном позиционировании эти свойства задают положения четырех углов элемента.

Значения углов могут быть заданы в единицах длины (например, в пикселях) или в процентах. Процентное значение для свойств top и bottom определяют процентное отношение от высоты (height) содержащего блока. Процентное значение для свойств left и right определяют процентное отношение от ширины (width) содержащего блока.

Что такое "содержащий блок"?

Это очень хороший вопрос. Сейчас мы узнаем, почему это важно знать и понимать.

Вот что говорит спецификация CSS 2.1 о "содержащем блоке" (containing block):

Если для элемента установлено абсолютное позиционирование, содержащим блоком является ближайший предок, имеющий абсолютное, относительное или фиксированное позиционирование. Если такого предка не существует, то содержащим блоком является "базовый содержащий блок" (initial containing block).

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

А вот как быть, если нет предков, которые были бы явно позиционированы? И что означает понятие "базовый содержащий блок"?

Обратимся еще раз к спецификации CSS:

Содержащий блок для первого элемента страницы определяется агентом пользователя (user agent).(Может быть задан относительно окна просмотра (viewport)). Такой содержащий блок называется базовым содержащим блоком.

Что тут можно сказать? Очень расплывчато. По определению user agent это в абсолютном большинстве случаев - браузер, а viewport - это окно просмотра браузера.

Другими словами, мы можем предполагать, что базовый содержащий элемент - это сам html документ. То есть, первый элемент, имеющий абсолютное позиционирование, будет позиционирован относительно всего документа. Предполагать можем, но полагаться я бы не советовал. Ибо спецификация отдает это на откуп браузеру (user agent).

Это не всегда удобно. Намного удобнее позиционировать элемент, начиная с определенного места документа. Добиться этого можно при помощи относительного позиционирования.

Помните я упоминал, что расскажу о том, как можно использовать элементы с относительным позиционированием? Так вот, сейчас мы узнаем ответ на этот вопрос.

Для позиционирования элемента абсолютно, но, считая от некого другого элемента, нужно сделать так, чтобы этот другой элемент (который должен быть предком в иерархии HTML документа) стал содержащим блоком. Это можно сделать, присвоив свойству position значение relative и не меняя свойств для сдвига элемента (left, top, bottom, right).

Для абсолютно позиционированного элемента свойства left, top, bottom, right задают смещение углов элемента от соответствующих углов содержащего блока. Таким образом, right:30px означает, что правый угол элемента должен быть смещен на 30 пикселей от правого края содержащего блока.

Вот как в теории это должно работать: 

 <html>
 <head><title>test positioning</title>
 <style type="text/css">
 #test0{
   position:absolute;
   top:100px;
   left:100px;
   width:100px;
   height:100px;
   text-align:right;
   border-style:solid;
   border-width:2px;
   border-color:#000;
 }
 #test1{
   text-align:left;
   position: absolute;
   top:10px;
   right:10px;
   bottom:10px;
   left:10px;
   border-style:solid;
   border-width:1px;
   border-color:#000;
 }
 </style>
 </head>
   <body>
     <div id="test0">
       <div id="test1">Это просто текст</div>
     </div>
   </body>
 </html>

Но не все браузеры следуют стандартам HTML и CSS. Одним, из самых главных "плохишей" является Internet Explorer от Microsoft.

В данном случае, IE, поступает следующим образом. Если указаны оба свойства, например, top и bottom, либо left и right, то IE игнорирует второе значение. Т.е. если указаны значения и top, и bottom одновременно, то IE применит только top, а bottom проигнорирует.

 "Победить" такое поведение IE можно задав только свойства top и left, и явно указав ширину (width) и высоту (height) для элемента. Вот пример: 

 #test1{
   position:absolute;
   top:10px;
   left:10px;
   width:78px;
   height:78px;
   text-align:right;
   border-style:solid;
   border-width:1px;
   border-color:#000;
 }

Данный код будет одинаково отображаться во всех браузерах, хотя и выглядит не так элегантно как задание всех четырех свойств. А все из-за того, что IE - самый популярный браузер в мире. Не хотите ли перейти на FireFox или Opera? :)

Для любого из четырех свойств может быть задано значение auto. Это означает, что значение этого свойства берется, как если бы элемент был статически позиционирован. Это удобно, если нужно сдвинуть элемент в каком либо одном направлении. Например, для сдвига элемента на 8 пикселей вправо, можно написать так: {top:auto;left:8px;}

Фксированное позиционирование

Фиксированное позиционирование очень похоже на абсолютное. Единственное отличие - это то, что содержащий блок - это всегда окно браузера.

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

Вы, наверняка, видели такие надоедливые окошки, которые отображаются на странице, даже при прокрутке. Они обычно все реализованы на JavaScript. Как вы думаете почему?

Ответ банален до невозможности. IE не поддерживает position:fixed, поэтому и приходится использовать JavaScript, хотя есть способ легче и элегантнее.

Но, надо отдать должное Microsoft. Они хоть и медленно но приводят свой браузер к стандартам. В частности, в IE7 position:fixed существует и даже работает как и должно. Может быть когда-нибудь, мы доживем до IE, который поддерживает полностью все стандарты:).

Свойство Z-index

Относительно позиционированные элементы располагаются в одном месте, а отображаются в другом. Абсолютно и фиксировано позиционированные элементы удаляются из структуры документа. Во всех трех случаях, возможно, что некие элементы будут перекрывать друг друга.

Чтобы явно указать в какой последовательности элементы будут отображаться, и было введено свойство z-index. Допустимые значения этого свойства - целые числа (в том числе и отрицательные).

Z-index - это как бы третье измерение веб страницы. Чем больше значение свойства z-index, тем ближе к пользователю (то есть к вам) находится элемент страницы.

Заключение

Мы рассмотрели различные способы позиционирования элементов на веб странице. Как вы могли заметить CSS существенно расширяет возможности стандартного HTML. Однако, нужно быть осторожным и тестировать свой код на работоспособность в самых популярных браузерах. Успехов вам и побольше экспериментов. Вот еще статья о хитростях CSS.

Еще статьи на тему: Веб дизайн

<<Предыдущая сатья | Следующая сатья>>

S-PRO студия веб дизайна

 
Hosted by uCoz