Позиционирование в каскадных таблицах стилей.
Если в языках разметки мы можем текст или объекты выравнивать по левому, правому, верхнему или нижнему краю, то CSS дает больше возможностей, не только сдвигать в нужную сторону, но и на нужное растояние. И в добавок мы работаем с слоями(если вы работаете с программой фотошоп, то знаете что это такое). А теперь об этом более подробно.
Для того чтобы изменять позицию бокса или блок-бокса нужно изменить схему позиционирования, но прежде чем их изменять нужно с ними познакомиться.
Схемы позиционирования задаются при помощи свойства position, эти схемы применяются к всем элементам(тегам), кроме генерируемого содержимого, позиционирование не наследуется.
1)position:static - нормальное расположение, это значение является по умолчанию, при использовании этой схемы позиции не задаются, т.е. объекты не смещаются вправо или в низ.
2)position:relative - относительное позиционирование. Эта схема утанавливает позиционирование относительно родительского блок-бокса, с начала определяется нормальное расположение, а потом относительно этого расположения сдвигается в нужную сторону.
3)position:absolute - абсолютное позиционирование. Эта схема не зависима от норального расположения, а так-же от вложености тегов, все отсчеты идут относительно порта просмотра. Порт просмотра это прямоугольная зона окна браузера, предусмотреная для просмотров файлов(сайтов).
4)position:fixed - фиксированое позиционирование. Эта схема анологична предыдущей, за исключением того что блок с этой схемой не перемещается с остальным содержимым, а остается всегда на своем месте.
Если схема позиционирования отличается от position:static, т.е. relative, absolute или fixed, то вы можете использовать свойства top, right, bottom, left, которыми можете задать значения: цифрами(пиксели и т.д.), процентах(относительно порта просмотра) или установить значение auto для того чтобы браузер сам опредилил позицию бокса. Но значение auto браузер InternetExplorer не коректно выводит на дисплей, это можно решить методом патчей(правила для конкретного браузера).
Еще об top, right, bottom, left, одному боксу можно задавать только одно свойство по вертикали(верх или низ) и/или горизонтали(вправо или влево).
Недостатком свойства position есть то что если одному боксу вы задали позицию отличнуную от position:static, то вам прийдется задавать позиции и родственным тегам, в пределах блок-бокса в котором они находятся или перекрытия слоев не избежать!!!
Float в переводе с английского "ПОПЛАВОК", но в какскадных таблицах стилей это не совсем так, а скорей всего обтекание объекта контентом, например в HTML если мы тегу IMG установили атрибут align с значениями right или left, то текст который находится рядом будет обтекать картинку, так-же мы можем затать атрибуты hspace vspace для отступов, а потом при помощи атрибута clear тега BR отменить обтекакание.
Все эти атрибут есть устаревшими даже для HTML-4 и альтернативой есть свойство Float.
Свойство Float может принимать значения:
1)float:left - бокс прижат влево, а окружение обтекает его с права;
2)float:right - бокс прижат вправо, а окружение находится слева;
3)float:none - без обтекания, окружение переносится на другую строку, т.е. аналогично "<img ><br>текст".
При обтекании необходимо явно указывать ширину бокса, за исключением если ширину может вычислить браузер, например картинки, апплета или флеш-объекта и т.д.
Прервать обтекание можно при помощи свойства clear, которое может принимать следующие значения:
1)clear:left - прервать обтекание слева;
2)clear:right- прервать обтекание справа;
3)clear:both - прервать все обтекание;
4)clear:none - это значение по умолчанию, которое запрещает прерывать обтекание бокса.
Свойство clear задается любому объекту, но более привычно задавать его тегу BR.
Свойства display, position и float взаимосмязанны между собой, например:
1)если бокс установлен display:none, то браузеры обязаны игнорировать position и float;
2)если position имеет значение absolute или fixed, display:block, а float:none, то позиция бокса будет определяться свойствами top, right, bottom или left и содержащим блоком бокса;
3)если float имеет значение отличное от none, display:block, то этот бокс все равно обтекается;
4)если position и float не заданы, то блок позиционироуется согласно своей модели бокса.
В самом верху страницы, я расказал что CSS работает с слоями, теперь попытаюсь более понятно объяснить и научить этими слоями управлять.
Представте, что перед вами не монитор а многоярусный прямоугольный торт, правда каждый ярус имеет не сантиметры, а всего лишь микроны, например порт просмотра это поднос, первый ярус торта это тег BODY, второй ярус это тег DIV, а третий ярус это текст в теге DIV.
Код с картинки можно представить вот так:
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<div>
текст
</div>
</body>
</html>
Из этого кода мы видим что у нас 3 яруса и каждый ярус выше другого, самым нижним есть body самым верхним текст(представте что это анонимный блок), значит у текста приоритет выше чем у тега DIV, а у DIV выше чем у BODY.
Приоритет слоев устанавливается свойством z-index, которое может принимать значение z-index: auto или z-index:1 - цифрами, т.е. мы можем сами устанавливать приоритет и чем цифра больше, тем слой выше.
Например:
<STYLE type="text/css">
BODY { z-index:1 }
DIV { z-index:2 }
.AnonimBlock { z-index:3 }
</STYLE>
Пример не очень яркий, потому что такие значения может подставить и сам браузер, но стоит нам поменять приоритет, например: .AnonimBlock{ z-index:2 } а DIV { z-index:125 } и DIV скроет собой весь анонимный блок.
Другой пример мы создаем страницу с фиксированым ДИВом и статической таблицей, оба эти тега лежат в BODY и значит имеют одинаковый приоритет, но стоит прокрутить страницу как таблица накроет собой этот DIV, потому что таблица имеет ячейки и ряды а они в свою очередь имеют выше приоритет над таблицей, значит и выше DIV , вот для таких случаев и нужно самостоятельно устанавливать приоритеты { z-index:125 } или даже { z-index:99999 }.