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


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

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

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

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


Чтобы изменить позицию тега ему можно присвоить стиль position:relative. С помощью position:relative позицию тега можно изменить относительно его исходного положения. Свойство left задает расстояние в пикселях, на которое смещается элемент из своего обычного горизонтального положения; свойство top задает расстояние в пикселях, на которое смещается элемент из своего обычного вертикального положения.

Задаваемое значение в пикселях может быть положительным или отрицательным. Положительное значение для свойства left перемещает элемент вправо, а отрицательное значение влево. Положительное значение для свойства top перемещает элемент на странице вниз, а отрицательное значение вверх.

В приведенном ниже примере каждое слово словосочетания заключено в отдельный контейнер

<div style="font-size:42pt">
  <span style="position:relative; top:-15px">Хочу </span>
  <span style="position:relative; top:+15px">веб</span>
  <span style="position:relative; top:0px">-</span>
  <span style="position:relative; top:-25px"> сайт</span>
</div>            
Относительное позиционирование

В итоге слова смещаются относительно своего нормального вертикального положения. Я не задал позицию слов по горизонтали, так как по умолчанию теги <span> размещаются в строке рядом друг с другом. Изменяется положение слов только по вертикали относительно своего обычного вертикального выравнивания.

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

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

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


В то время как position:relative размещает элемент относительно окружающих элементов, position:absolute помещает элемент относительно его контейнерного элемента. По умолчанию контейнерным элементом является сама веб страница, тег <body>. Поэтому элементы позиционируются абсолютно относительно верхнего левого угла веб страницы и исключаются из обычного потока элементов.

<div style="position:absolute; top:30px; left:25px; z-index:-1;  
font-family:impact; font-size:68pt; color:#b6b6b6">Хочу веб-сайт</div>
 
<p style="width:600px">Размещенное под этим параграфом словосочетание "Хочу веб-сайт"
определено тегом div. Этот тег появляется в коде HTML сразу перед этим параграфом.
 Он позиционирован абсолютно; поэтому он исключен из нормального потока элементов страницы.
 В связи с этим исключением тега из потока элементов страницы параграф смещается вверх,
чтобы занять освободившееся пространство страницы, поэтому накладывается на словосочетание.
 Таким образом, словосочетание "Хочу веб-сайт" занимает на странице абсолютное положение,
 независимо от того, что еще его окружает. Для него задано также значение z-index, равное -1,
 помещающее его на странице под слоем текста, чтобы слово не перекрывало текст. </p>                 
Абсолютное позиционирование

Слой текста страницы всегда имеет значение z-index, равное 0 (нулю). Поэтому тегу <div> задано значение z-index, равное -1, для размещения словосочетания под слоем текста, чтобы оно не мешало восприятию. Запомните, пожалуйста, что когда элемент страницы позиционируется абсолютно и для него заданы значения свойств left и top, то он, в отличии от относительного позиционирования, исключается из нормального потока элементов страницы.

В приведенном выше примере тег <div> удаляется из его нормального физического положения перед параграфом.

Параграф затем перемещается вверх, чтобы занять освободившуюся позицию тега <div>. Это означает, что не имеет значения, где на странице кодируется элемент с абсолютным позиционированием. Независимо от его фактического кодирования он все равно позиционируется относительно верхнего левого угла страницы или своего родительского элемента.

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

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

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

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

Ознакомится подробнее с изменением порядка следования слоев с помощью z-index и относительного позиционирования объектов вы можете посмотрев пост: "Управляем положением слоя с помощью z-index", ну а вопросы абсолютного позиционирования рассмотрены в уроке: "Абсолютное позиционирование слоя на веб-странице"

Автор: Сергей Зарубин

Дата: 2011-05-13

Колличество просмотров: 20960

Нравится

Комментарии к заметке:

Комментарий добавил(а): Серго
Дата: 2012-03-30

Спасибо! Оч. содержательно.



Добавить новый комментарий


Введите число с картинки:

captcha