Листинг 2

< HTML>

< HEAD>

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

< /HEAD>

< BODY bgcolor=white text=black>

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

< P>

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

< TABLE border=l cellspacing=0 cellpadding=10

style=" position: absolute; left: 50px; top: 300px; " >

< TR> < TD>

Таблица абсолютно позиционирована.

< IMG src=gerbrk.jpg width=85 height=80 border=0

alt=" Герб Казахстана"

style=" position: absolute; left: 100px; top: 50px; " >

< /TD> < /TR>

< /TABLE>

< IMG src=kbtu.jpg width=126 height=60 border=0

alt=" Старый дом правительства"

style=" position: absolute; left: 100px; top: 50px; " >

< /BODY>

< /HTML>

Задания:

1. Картинку – герб РК позиционируйте в точку (80, 40) относительно таблицы, затем в точку 150, 150. В каждом случае измените размеры окна браузера и посмотрите как передвигается по экрану рисунок.

2. Картинку – Старый дом правительства позиционируйте в точку (50, 100) относительно окна документа. Измените размеры картинки на (140, 800) пикселы. Фон вокруг текста сделайте синим.

3. Поменяйте местами картинки, соответственно и их размеры. Позиционируйте герб относительно верхнего левого угла документа.

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

Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: «выше» оказывается тот элемент, код которого идет, позже (листинг 3, рис.4).

Рис. З. Две абсолютно позиционированные картинки

Рис. 4.Картинка, код которой расположен позже, перекрывает картинку, код которой идет раньше