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

Пришел как-то раз Питачог к Винни Пуху и грит:
— Слышь, Медвед, ты как ваще насчет баб?
— Эбсолютли!
— Чего лютли?
— Эбсо!

Поговорим сегодня за абсолютное позиционирование, применяемое в css. В предыдущей статье мы убедились, что по-умолчанию все блоки располагаются на странице в так называемом естественном потоке. Игрушку тетрис все помнят? Эдакий стаканчег, в которые складываются всякие загогулины. Так вот если этот стакан перевернуть, то получится полная аналогия с нашими козами. То есть, блоки заполняют пространство страницы сверху вниз, слева направо. Либо другая аналогия — как мы пишем письмо? Точно также. Слева направо выводим букавки пока не кончится строка, а потом переходим ниже на следующую.

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

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

Да, есть такая вот штуковина. В двух словах: это расположение блока именно там, где нам нужно, а не в потоке. Сам блок словно бы изымается из нормального потока. По-другому это можно представить себе так: как и в Фотошопе™ есть слои, так и здесь есть как бы два экрана — на первом располагается обычный естественный поток, а над ним располагается второй экран, на котором наш супер-пупер-абсолютно-позиционированный-блок. Таких «экранов» может быть много.

Зачем нужно выдергивать блок из естественного потока?
Причин может быть куча. Например, нам надо просто разместить на странице один единственный блок. Скажем, размером 300х200 пикселей с надписью «Ща мой саит не работаед, патамушта я ищо ево недаделал. Даделываю уже ща». По-умолчанию, этот прямоугольник будет лепиться к верхнему левому углу. А мы вот хотим, чтобы он всенепременно торчал посередке. Ну или где-то так. Вот для этого и существует абсолютное позиционирование. С его помощью мы укажем нашему браузеру, где конкретно расположить блок.

Делается это лиххко и просто. Как известно, у прямоугольника имеется 4 угла. Нас интересует верхний левый. Если принять его за некую точку на экране монитора, то можно предположить, что она имеет парочку координат — по вертикали и по горизонтали (графики в школе все чертили, поэтому помним еще). Так вот при абсолютном позиционировании можно этой точке задать конкретные координаты! Задаются они относительно родительского элемента, в нашем случае — всего окна монитора. То есть, для этой точки (угла прямоугольника) мы задаем конкретные отступы от верхнего края монитора и от левого его края. В пикселах конечно же. Делается это так:

Вначале пропишем в листе стилей для нашего блока, что он не просто так, а самый что ни на есть абсолютно позиционированный:

#box {
position: absolute;
top: 150px;
left: 200px;
width: 300px;
height: 200px;
}

Что мы тут наблюдаем? Во-первых, появилось новое правило — position со значением absolute. Для чего оно — думаю понятно. Следующие два правила указывают как раз на координаты верхнего левого угла прямоугольника. Подчеркиваю, чтобы это хорошо запомнилось, ибо остальные углы браузер не принимает во внимание. И именно поэтому мы в последних двух правилах задали размер самого прямоугольника по ширине и высоте. Тем самым достроив его до конца.

Другой вариант применения. Сейчас очень модно стало цеплять на странице полупрозрачные картинки, перекрывающие текст, либо делать «наползание» одного текста на другой. Вот как раз с помощью абсолютного позиционирования можно сделать такой финт. Кстати, на многих буржуйских сайтах замечал такую фичу: картинка, вовсе даже не полупрозрачная, а самая обычная, почти наполовину перекрывает какой либо текст. Хотя по оставшемуся кусочку можно леххко понять, о чем идет речь. С одной стороны глупость, но с другой — внимание привлекает. А это зачастую поважнее, нежели удобство восприятия. :)

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