Координаты и размеры
Стандарт CSS-P дозволяет с точностью до пикселя поместить блочный элемент разметки в рабочем поле окна браузера. При таком подходе появляется натуральный вопрос о том, как устроена система координат, в которой автор страницы изготавливает размещение компонентов страницы.
CSS-P определяет две системы координат: относительную и абсолютную. Это разрешает обеспечить эластичность размещения элементов как касательно границ рабочего поля окна браузера, так и касательно друг друга.
Блоки - это не абстрактные точки, которые не занимают на плоскости cтраницы места. Блоки - это прямоугольники, которые "заметают" площадь. Текст и другие компоненты страницы под блоком перестают быть доступными пользователю, следственно линейные размеры блока имеют для создания HTML-страниц не меньшее значение, чем координаты блока.
При применении "безусловных" координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно:
Если в этой системе координат определенный блочный элемент должен быть помещен на 10px ниже верхнего обреза рабочей области браузера и на 20px правее правого края рабочей области браузера, то его изложение будет выглядеть дальнейшим образом:
.example {position:absolute;top:10px;left:20px;}
[Открыть окно примера]
В данной записи тип системы координат задан признаком position (значение - absolute), координата X задана признаком left (значение - 20px), координата Y задана признаком top (значение - 10px).
Признаки top и left определяют координаты верхнего левого угла блока в безусловной системе координат.
Значения координат могут быть и негативными. Для того, дабы убрать из отображаемой области блок с линейными размерами 100px (высота) на 200px(ширина) довольно отпозиционировать его дальнейшим образом:
.example {position:absolute;
top:-100px;left:-200px;
width:200px;height:100px;}
[Открыть окно примера]
Безусловное позиционирование используется тогда, когда либо все оглавление страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное размещение значимо с точки зрения дизайна, скажем, для организации всплывающих меню.
Данная координатная система дозволяет поместить блоки на странице в координатах охватывающего их блока. Превосходства и надобность наличия такой координатной системы очевидны. Она дозволяет сберегать взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания.
В качестве точки отсчета в этой системе координат выбрана точка размещения нынешнего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.
Для задания координат блока в этой системе используют запись типа:
<div style="border-width:1px;border-style:solid;
width:100%;height:100px;">
<div style="position:relative;top:0px;left:0px;
border-width:1px;">
Данный блок находится в точке отсчета относительных координат
</div>
<div style="position:relative;top:0px;left:50px;
border-width:1px;">
А данный блок смещен вправо на 50px
</div>
</div>
Для работы с относительной системой координат отменнее пользоваться универсальными блоками DIV. Это связано с тем, что в NN, скажем, параграф не может содержать параграфов. Всякий блок неотлагательно закрывает параграф, следственно, вложить в него что-либо невозможно.
Следует подметить, что NN вообще непредсказуем в работе с относительными координатами, следственно в нем их следует чураться.
В относительной системе координат дозволено пользоваться негативными смещениями:
<div
style="position:relative;
top:0;
left:50;
border-width:1px;
border-style:solid;
width:200px;">
<a class=doc
href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;};
void(0);">
Сдвинуть слой
</a>
</div>
В данном примере слой, изначально сдвинутый на 50 пикселей вправо, позже нажатия на гипертекстовую ссылку смещается на 100 пикселей налево, получая негативную величину смещения по оси X (left:-50px). Позже повторного нажатия на ссылку расположение блока восстанавливается.
Линейные размеры блока задаются двумя параметрами: шириной(width) и высотой(height) блока. В браузерах ширина и высота блока интерпретируется по различному.
В NN ширина и высота блока - это рекомендуемые параметры. Если текст выходит за эти ограничения, то блок возрастает до нужных размеров, если текста нет вообще, то блок сжимается до маленького квадрата:
<p style="width:200px;
height:100px;
background-color:darkred;
color:white;">
...
</p>
Текст расположен для того, дабы блок был виден в Netscape Navigator
Приведенного в примере изложения должно хватить для приобретения итога, но в NN для такого блока необходимо применить некоторые добавочные признаки:
<p style="width:200px;
height:100px;
background-color:darkred;
color:white;
border-width:1px;
border-color:white;">
<span style="color:white;">
...
</span>
</p>
Без границы блок не будет залит темно-красным цветом, а без span текст будет отображаться цветом умолчания для данной страницы. Никакому умному объяснению такое поведение браузера не поддается, следственно не стоит на этих признаках строить дизайн страниц.