ВОПРОСЫ: 1. Позиционирование 2. Иерархия кода страницы 3. Абсолютное позыционеррование 4. Относительное позыционеррование 5. Смешанное позыционеррование 5.1. Absolute [relative] 5.2. Relative [absolute] 5.3. Absolute [absolute] 5.4. Relative [relative] 5.5. Z-index

1. Позиционирование Позиционирование это управление координатами размещения элемента в окне браузера. CSS предлагает для позыционеррования свойство position. У этого свойства могут быть три значения: absolute (абсолютное позыционеррование), relative (относительное позыционеррование) и static (статическое позыционеррование). Значение static размещает элемент на странице так, как он располагался бы без всякого позыционеррования, поэтому использование этого значения не дает ничего нового. Алгоритмы работы значений absolute и relative будут рассмотрены ниже, но сначала одно важное напоминание об иерархической структуре HTML-кода.

Иерархия это структура, в которой содержимое «упаковано» по пакетикам, вложенным друг в друга на подобие матрешек. Все элементы страницы расположены внутри блока. Таким образом, элемент является родителем всех других элементов страницы. Пусть, например, страница имеет следующий код. 2. Иерархия кода страницы BODY e01 e011 e012 e02 e021 e В показанном примере элемент имеет два прямых потомка e0l и е 02. В свою очередь эти элементы тоже имеют по два потомка: e011, е 012 и е 021, е 022 соответственно.

Абсолютное позыционеррование задается стилевым указанием position: absolute. При этом начало координат элемента находится в верхнем левом углу прямого предка, при условии, что он также позыционеррован (абсолютно или относительно). Если родитель не позыционеррован, то берется его родитель. Если все предки не имеют указаний position, то в качестве точки отсчета принимается левый верхний угол экранного образа тега, т. е. левый верхний угол документа. Горизонтальная и вертикальная координаты задаются свойствами left и top соответственно. 3. Абсолютное позыционеррование

Ниже показан пример, в котором картинка позыционерруется в точку (100, 50). Началом координат браузер считает начало документа. Абсолютное позыционеррование Абсолютное позыционеррование В этом примере картинка абсолютно позыционер- рована.Она располагается в 80 пикселах по горизон-тали и в 60 пикселах по вертикали от начала документа.

Измените размеры окна и убедитесь,что картинка всегда остается на прежнем месте. <IMG src=IMG061. GIF width=126 height=70 border=0 alt=«Египетская пирамида» style="position:absolute;left:80px; top:60px;">

В следующем примере абсолютно позыционеррованы две картинки. В коде для каждой из них указаны координаты (100, 50), но для одной началом координат является начало документа, а для другой начало таблицы. Абсолютное позыционеррование Абсолютное позыционеррование Обе картинки абсолютно позыционеррованы в точку (100, 50). Начало координат для одной картинки совпадает с началом документа, для второй &#151; с началом таблицы.

<TABLE border=l cellspacing=0 cellpadding=10 style="position:absolute; left:50px; top:300px;"> Таблица абсолютно позыционеррована. <IMG src=gerbrk.jpg width=85 height=80 border=0 alt= "Здание акимата" style="position:absolute; left:100px; top:50px;"> <IMG src=kbtu.jpg width=126 height=60 border=0 alt="Здание акимата" style="position:absolute; left:100px; top:50px;">

Приведенные выше примеры наглядно показы-вают, что абсолютно позыционеррованные элемен-ты выпадают из процесса обычного последова-тельного форматирования. Браузер не берет в расчет порядок следования кодов, а учитывает только вложенность для определения начала координат. Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы. Порядок следования кодов абсолютно позыционер-руемых элементов становится важным, если они начинают перекрывать друг друга: «выше» оказывается тот элемент, код которого идет, позже. Рассмотрим еще два примера.

Абсолютное позыционеррование Абсолютное позыционеррование В этом примере обе картинки абсолютно позы- цианированы.Так как код &#147; Мальчик&#148; идет раньше кода &#147;Вышки&#148;,то вторая картинка перекрывает первую. <IMG src=IMG061. gif width=160 height=120 border=0 alt=Пирамида style="position:absolute; left:l00px; top:150px;"> <IMG src=vishka.jpg width=140 height=150 border=0 alt=Вышка style="position:absolute; left:200px;top:250px;">

4. Относительное позыционеррование Относительное позыционеррование задается стилевым указанием position:relative. Такой элемент участвует в обычном последовательном форматировании документа. За начало координат принимается та точка, в которой элемент был бы размещен без позыционеррования. При относительном позыционерровании сначала браузер размещает элемент на странице, выпол-няя обычное форматирование, а затем по ука-заниям left и top смещает его на заданные значения. В приведенном ниже примере документ фор-матируется обычным образом.

Обычное построение документа Обычное построение документа <IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10> Это пример обычного форматирования документа без всякого позыционеррования.

В следующем примере на картинку наложено относительное позыционеррование.

<Относительное позыционеррование Относительное позыционеррование <IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:relative; left:0px; top:150px;"> В этом примере картинка смещена вниз на 150 пикселов относительно того места, которое она занимала бы на экране при отсутствии позыционеррования.

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

5. Смешанное позыционеррование Рассмотрим четыре варианта смешанного позы-ционирования, условно обозначенных ниже как: absolute [relative] относительно позы-цианированный блок внутри абсолютно позы-ционированного; relative [absolute] абсолютно позы-цианированный блок внутри относительно позы-ционированного; absolute [absolute] абсолютно позы- цианированный блок внутри абсолютно позы-ционированного; relative [relative] относительно позы-цианированный блок внутри относительно позы-ционированного.

5.1. Absolute [relative] Код относительно позыционеррваной картинки расположен внутри кода абсолютно позыционер-рваной таблицы. Таблица смещена от начала документа вправо на 50 пикселов, и это поло-жение остается фиксированным при изменении размеров окна. Картинка смещена вниз на 100 пикселов относительно ее «нормального» поло-жения внутри таблицы. При этом в таблице текст расположен так, как будто картинка нахо-дится на своем обычном месте. Смешанное позыционеррование Смешанное позыционеррование

Таблица абсолютно позыционеррована в точку (50,0). Внутри кода таблицы расположена картинка с относительным позыционеррованием вниз на 100 пикселов. <TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position:absolute; left:50px;top:0px"> <IMG src=F:/CSS/IMG/kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:relative; left:0px; top:100px;"> Тег IMG размещается внутри таблицы. Для картинки записано относительное позы- ционирование вниз на 100 пикселов.

BODY absolute relative

5.2. Relative [absolute] Во втором примере код абсолютно позыционер- рваной картинки расположен внутри кода относительно позыционеррваной таблицы. Таблица смещена относительно своего «нормального» положения вправо на 50 пикселов. Начало координат для картинки связано с левым верхним углом таблицы. Картинка смещается вниз относительно этого положения на 100 пикселов. При этом текст в таблице форматируется без учета тега Смешаннoe позыционеррование Смешанное позыционеррование

Таблица относительно позыционеррована вправо на 50 пикселов.Внутри кода таблицы расположена картинка с абсолютным позыционеррованием (0,100) <TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position: relative; left :50px;top: 0px"> <IMG src=F:/Css/IMG/kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:absolute; left:0px; top:l00px;"> Тег IMG размещается внутри таблицы.Для картинки записано абсолютное позыционеррование вниз на 100 пикселов.

BODY relative absolute

5.3. Absolute [absolute] Код абсолютно позыционеррваной картинки рас-положен внутри кода абсолютно позыционеррован-ной таблицы. Картинка не меняет своего поло-жения на экране при изменении размера окна, потому что координаты таблицы остаются неиз-менными Смешанное позыционеррование Смешанное позыционеррование Таблица абсолютно позыционеррована в точку (50,0). Внутри кода таблицы расположена картинка с абсолютным позыционеррованием в точку (0,120).

<TABLE border=l cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position:absolute;left:50px;top:0px"> <IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:absolute; left:0px; top:120px;"> Тег IMG размещается внутри таб-лицы.Для картинки записано абсолютное позыцио-нирование в точку (0,120).

BODY absolute

5.4. Relative [relative] Код относительно позыционеррваной картинки расположен внутри кода относительно позыцио-нирваной таблицы. Когда положение таблицы меняется на экране из-за изменения размеров окна, меняется и положение картинки: ведь смещается начало координат, ниже которого на 100 пикселов должна быть расположена картинка Смешанное позыционеррование Смешанное позыционеррование

Таблица относительно позыционеррована вправо на 50 пикселов.Внутри кода таблицы расположена кар-тинка с относительным позыционеррованием вниз на 100 пикселов. <TABLE border=1 cellspacing=0 cellpadding=10 width=80% bgcolor=#EEE5DB style="position:relative; left:50px;top:0px"> <IMG src=./pic/let.gif width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:relative; left:0px; top:100px;"> Тег IMG размещается внутри таблицы. Для картинки записано относительное позыционеррование вниз на 100 пикселов. ;

BODY relative

5.5. Z-index Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z- index:0). Положительный z-index размещает элементы над основным текстом, отрицательный под ним. Из двух плоскостей размещения та расположена выше, у которой z-index больше. Z-индекс

Z-индекс Этот текст &#151; основной. К нему не приписано никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости. <IMG src=F:/CSS/kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:absolute; left:0px;top:20px;z-index=-1;"> <IMG src=kbtu.jpg width=126 height=60 border=0 alt=Университет align=left hspace=10 style="position:absolute; left:50px;top:70px;z-index=-2;">