Относительное позиционирование
Относительное позиционирование задается стилевым указанием position:relative. Такой элемент участвует в обычном последовательном форматировании документа. За начало координат принимается та точка, в которой элемент был бы размещен без позиционирования.
Алгоритм относительного позиционирования можно представить следующим образом. Сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем по указаниям left и top смещает его на заданные значения.
В приведенном ниже примере (листинг 9.4, рис. 9.5) документ форматируется обычным образом.
Листинг 9.4
<HTML>
<HEAD>
<TITLE>Обычное построение документа</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Обычное построение документа</H1>
<P>
<IMG src=kbtu.jpg width=126 height=60 border=0
alt=Старый дом правительства align=left hspace=10>
Это пример обычного форматирования документа без всякого
позиционирования.<BR clear=left>
</BODY>
</HTML>
Рис. 9.5. Обычное форматирование
В следующем примере (листинг 9.5, рис. 9.6) на картинку наложено относительное позиционирование.
Листинг 9.5
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE><Относительное позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> Относительное позиционирование </H1>
<P>
<IMG src=kbtu.jpg width=126 height=60 border=0
alt=Университет align=left hspace=10
style="position:relative; left:0px; top:150px;">
В этом примере картинка смещена вниз на 150 пикселов относительно того места, которое она занимала бы на экране при отсутствии позиционирования. <BR clear=left>
</BODY>
</HTML>
Задания:
Этот пример измените так, чтобы картинка была смещена вниз на 200 и правее на 75 пикселов относительно того места, которое она занимала бы на экране при отсутствии позиционирования.
Создайте страницу, в которой та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже предыдущей.
Рис. 9.6. Относительное позиционирование
Если изменить размер окна, то можно увидеть, что картинка перемещается по экрану вслед за точкой отсчета — началом абзаца, которому принадлежит тег <img> в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки.
Смешанное позиционирование
Рассмотрим четыре варианта смешанного позиционирования, условно обозначенных ниже как:
absolute [relative] — относительно позиционированный блок внутри абсолютно позиционированного;
relative [absolute] — абсолютно позиционированный блок внутри относительно позиционированного;
absolute [absolute] — абсолютно позиционированный блок внутри абсолютно позиционированного;
relative [relative] — относительно позиционированный блок внутри относительно позиционированного.
Absolute [relative]
Код относительно позиционированной картинки расположен внутри кода абсолютно позиционированной таблицы. Таблица смещена от начала документа вправо на 50 пикселов, и это положение остается фиксированным при изменении размеров окна. Картинка смещена вниз на 100 пикселов относительно ее «нормального» положения внутри таблицы. При этом в таблице текст расположен так, как будто картинка находится на своем обычном месте (листинг 4.6, рис. 4.7, 4.8).
Рис. 9.7. Absolute (relative)
Листинг 9.6
<HTML>
<HEAD>
<TITLE>Смешанное позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Смешанное позиционирование</H1>
<P>
Таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы
расположена картинка с относительным позиционированием вниз на 100 пикселов. <P>
<TABLE border=l cellspacing=0 cellpadding=10
width=80% bgcolor=#EEE5DB
style="position:absolute; left:50px; top:0px">
<TR><TD>
<P>
<IMG src=kbtu.jpg width=126 height=60 border=0
alt=Старый дом правительства align=left hspace=10
style="position:relative; left:0px; top:100px;">
Тег <TT><B>IMG</B></TT> размещается внутри таблицы.
Для картинки записано относительное позиционирование вниз на 100
пикселов.<BR clear=left>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Рис.
9.8. Схема
позиционирования
Relative [absolute]
Во втором примере код абсолютно позиционированной картинки расположен внутри кода относительно позиционированной таблицы. Таблица смещена относительно своего «нормального» положения вправо на 50 пикселов. Начало координат для картинки связано с левым верхним углом таблицы. Картинка смещается вниз относительно этого положения на 100 пикселов. При этом текст в таблице форматируется без учета тега <img> (листинг 9.7, рис. 9.9, 9.10).
Листинг 9.7
<HTML>
<HEAD>
<МЕТА http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Смешаннoe позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<Н1>Смешанное позиционирование</Н1>
<P>
Таблица относительно позиционирована вправо на 50 пикселов. Внутри кода
таблицы расположена картинка с абсолютным позиционированием (0,100).
<Р>
<TABLE border=l cellspacing=0 cellpadding=10
width=80% bgcolor=#EEE5DB
style="position: relative; left :50px; top: 0px"> <TR><TD>
<P>
<IMG src=./pic/let.gif width=126 height=60 border=0
alt=Университет align=left hspace=10
style="position:absolute; left:0px; top:l00px;">
Тег <TT><B>IMG</B></TT> размещается внутри таблицы. Для картинки
записано абсолютное позиционирование вниз на 100 пикселов.<BR clear=left>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Рис. 9.9. Relative (absolute)
Рис. 9.10. Схема позиционирования
Absolute [absolute]
Код абсолютно позиционированной картинки расположен внутри кода абсолютно позиционированной таблицы. Картинка не меняет своего положения на экране при изменении размера окна, потому что координаты таблицы остаются неизменными (листинг 9.8, рис. 9.11, 9.12).
Листинг 9.8
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Смешанное позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1>Смешанное позиционирование</H1>
<P>
Таблица абсолютно позиционирована в точку (50,0). Внутри кода таблицы
расположена картинка с абсолютным позиционированием в точку (0,120).
<P>
<TABLE border=l cellspacing=0 cellpadding=10
width=80% bgcolor=#EEE5DB
style="position:absolute;left:50px;top:0px">
<TR><TD>
<P>
<IMG src=kbtu.jpg width=126 height=60 border=0
alt=Университет align=left hspace=10
style="position:absolute; left:0px; top:120px;">
Тег <TT><B>IMG</B></TT> размещается внутри таблицы. Для картинки
записано абсолютное позиционирование в точку (0,120).<BR clear=left>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Рис.9.11. Absolute (absolute)
Рис. 9.12. Схема позиционирования
Relative [relative]
Код относительно позиционированной картинки расположен внутри кода относительно позиционированной таблицы. Когда положение таблицы меняется на экране из-за изменения размеров окна, меняется и положение картинки: ведь смещается начало координат, ниже которого на 100 пикселов должна быть расположена картинка (листинг 4.9, рис. 4.13, 4.14).
Рис. 9.13. Relative [relative]
Рис. 9.14. Схема позиционирования
Листинг 9.9
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Смешанное позиционирование</TITLE>
</HEAD>
<BODY bgcolor=white text=black">
<Н1>Смешанное позиционирование</Н1>
<P>
Таблица относительно позиционирована вправо на 50 пикселов. Внутри кода таблицы
расположена картинка с относительным позиционированием вниз на 100 пикселов.
<Р>
<TABLE border=1 cellspacing=0 cellpadding=10
width=80% bgcolor=#EEE5DB
style="position:relative; left:50px;top:0px">
<TR><TD>
<P>
<IMG src=./pic/let.gif width=126 height=60 border=0
alt=Университет align=left hspace=10
style="position:relative; left:0px; top:100px;"> Тег <TT><B>IMG</B></TT> размещается внутри таблицы. Для картинки записано относительное позиционирование вниз на 100 пикселов.<BR clear=left>
</TD></TR>
</TABLE> ;
</BODY>
</HTML>
Приведенные выше примеры наглядно показывают, что элемент позиционируется вместе со своими потомками, независимо от того, как позиционируются последние (или не позиционируются вовсе).
Z-index
Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z-index:o). Положительный z-index размещает элементы над основным текстом, отрицательный — под ним. Из двух плоскостей размещения та расположена выше, у которой z-index больше (листинг 9.10, рис. 9.15).
Листинг 9.10
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE> Z-индекс </TITLE>
</HEAD>
<BODY bgcolor=white text=brown">
<H1>Z-индекс</H1>
<P>
Этот текст основной. К нему не приписано никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости.
<IMG src=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;">
</BODY>
</HTML>
Если у элементов одинаковый z-index (задан явно или не задан вовсе), то тот из них будет располагаться выше, чей HTML-код идет позже.
Рис. 9.15. Z-index