2 9. Абсолютное, относительное и статическое форматирование.
А
бсолютное
позиционирование
Абсолютно позиционированный элемент
и все его потомки изымаются из естественного
потока отображения элементов и
позиционируются независимо, причем сам
элемент или его потомки могут перекрывать
ранее отображенные элементы. Чтобы
определить точку отсчета местоположения
элемента, следует найти его ближайшего
родителя, позиционированного абсолютно
или относительно. Положение левой
верхней вершины блока этого элемента
и будет точкой отсчета для абсолютно
позиционированного элемента. Если
процесс поиска подобного родителя
(следует пропускать все позиционированные
статически элементы) дойдет до элемента
<BODY>, то тело документа и будет тем
элементом, относительно которого
позиционируется исходный элемент.
Следующий фрагмент страницы HTML
иллюстрирует абсолютное позиционирование
элемента:
<SPAN STYLE="position:static;
background-color:#90EE90">
Родитель, позиционированный статически!
<IMG SRC="Ж.gif" STYLE="position:absolute; top:60px; left:60px;">
</SPAN>
Н
а
рис. 10.7 показано отображение страниц с
абсолютно позиционированным элементом
(графическим изображением буквы Ж) в
тэге <SPAN>, позиционированном статически
(а и б) и относительно (в и г). Так как в
исходном фрагменте родитель (<SPAN>)
элемента <IMG>, позиционированного
абсолютно, является статически
позиционированным элементом, то ищется
ближайший абсолютно позиционированный
родитель. Таковым будет тело документа,
относительно начала которого и смещается
вправо и вниз на 60 пикселов изображение
(рис. 10.7, а). Если к этому фрагменту
добавить один абзац, то элемент <SPAN>
сместится вниз, но его потомок — элемент
<IMG> — все равно будет позиционирован
относительно начала документа (рис.
10.7, б), что приводит к перекрытию
изображением родителя.
Рис. 10.7. Отображение абсолютно позиционированного изображения
Если теперь изменить позиционирование родителя на относительное, то элемент <IMG> будет смещен вниз и вправо относительно начала элемента-родителя (рис. 10.7, в). А если добавить перед элементом <SPAN> абзац, то изображение сместится вместе со своим родителем, оставаясь расположенным на 60 пикселов вниз и вправо относительно начала элемента-родителя (рис. 10.7, г).
Примечание
Изменение размеров окна браузера не изменит положение абсолютно позиционированного элемента. Поэтому при уменьшении размеров окна такой элемент может оказаться за границами окна и, следовательно, не видим.
Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя. Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.
Еще два параметра, влияющие на отображение абсолютно позиционированного элемента, — это свойства width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается самостоятельно в своем собственном прямоугольном блоке, левый верхний угол которого помещается в определенную точку окна браузера. Свойства width и height задают ширину и высоту этого блока. Если они не заданы, то по горизонтали блок распространяется до правого края окна браузера, а по вертикали — на столько, на сколько необходимо для отображения содержимого элемента. Установка значений свойств width и height ограничивает размеры блока абсолютно позиционированного элемента. Если его содержимое не помещается в блок заданного размера, то оно просто не видимо пользователю. Динамическим изменением размеров блока можно сделать так, что будет видно все содержимое элемента.
Относительное позиционирование
Относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего. Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя.
Р
ис.
10.8, а демонстрирует отображение в окне
браузера последовательности относительно
позиционированных элементов страницы:
<
SPAN
STYLE="position:relative;
background-color: gray">
Это изображение </SPAN>
<
IMG
SRC="Ж.gif"
STYLE="position: relative; ">
<SPAN STYLE="position:relative;
background-color: lightgrey">
является изображением буквы "Ж".
</SPAN>
Каждый элемент потока позиционируется в конец предыдущего. Если позиционирование элемента-изображения изменить на абсолютное, то он будет выведен из стандартного потока отображения, а оставшиеся относительно позиционируемые элементы будут отображаться друг за другом в едином потоке (рис. 10.8 б). Здесь же видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше третьего элемента и перекрывается последним.
До сих пор мы не задавали значений свойств top и left относительно позиционируемых элементов. Если для какого-либо элемента из стандартного потока определены значения этих свойств, то этот элемент смещается вниз и вправо на заданные величины относительно правого верхнего угла блока предыдущего элемента в потоке, а следующий элемент отображается так, как будто предыдущий смещенный элемент остается не смещенным. Это правило иллюстрируется на рис. 10.8, в, где отображен предыдущий фрагмент, в котором параметр STYLE элемента <IMG> имеет значение "position: relative; top: 10Opx; left: 40px;".
Статическое позиционирование
В стандартном потоке статически позиционированные элементы ведут себя аналогично относительно позиционированным: они отображаются непосредственно сразу после предыдущего элемента в потоке. Единственное их отличие от относительно позиционируемых элементов заключается в том, что для них нельзя установить значения свойств top и left, и тем самым сместить их, например, со строки абзаца вверх или вниз.
В
изуальные
эффекты
Несколько свойств каскадных таблиц стилей позволяют организовать, совместно со встроенными сценариями, динамическое отображение и скрытие элементов страницы HTML.
Свойство visibility управляет отображением элемента. Если его значение равно visible (значение по умолчанию), то элемент отображается, если оно установлено равным hidden, то элемент не отображается. Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из
потока отображения. Это означает, что соответствующий ему блок занимает надлежащее положение на странице, но содержимое этого блока (элемент) не отображается.
Подобное поведение отличается от поведения объекта со свойством display равным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу.
Два разных поведения скрываемых элементов, связанных с использованием двух разных свойств, показаны на рис. 10.9.
На рис. 10.9, а показано отображение двух элементов <IMG>, источником изображения которых является графический файл буквы Ж. Верхний элемент определен со свойством visibility равным visible, а нижний элемент — со свойством display равным block. При нажатии соответствующих кнопок свойство visibility первого изображения становится равным hidden, а свойство display второго изображения изменяется на none. На рис. 10.9, б показан результат отображения скрытых изображений. Блок первого изображения остается в потоке отображения, и поэтому только исчезает картинка. Второе изображение изымается из потока отображения, и поэтому никакого зарезервированного для картинки места не остается.
С
войство
clip позволяет обрезать видимое изображение
абсолютно позиционированного элемента.
Каждый такой элемент отображается в
прямоугольном блоке определенной ширины
и высоты, которые определяются либо
шириной и высотой самого элемента, либо
его свойствами width и height. Та часть
элемента, которая отображается в блоке,
является его видимым изображением. Блок
отображения не обязательно должен
соответствовать размерам самого
элемента: он может вмещать весь элемент,
а может вмещать только его часть.
Например, блок отображения элемента
<IMG> может быть меньше размеров
графического изображения, представляемого
этим элементом. Свойство clip воздействует
только на блок отображения элемента.
Его значением может быть auto (никакого
отсечения не производится) или границы
прямоугольника видимого изображения
элемента, которые задаются с помощью
следующего параметра rect(<top>
<right><bottom> <left>). Величины <top>,
<right>, <bottom> и <left> определяют,
соответственно, верхнюю, правую, нижнюю
и левую границы видимого изображения
элемента относительно блока отображения.
На рис. 10.10, а показано графическое
изображение с размерами 89x74 пиксела, а
на рис. 10.10, б то же изображение со
свойством clip равным rect(10 70 60 10).
С
войство
overflow определяет поведение элемента,
когда размеры его содержимого не
соответствуют размерам блока отображения,
установленного свойствами top, left, width и
height. Существует четыре значения этого
свойства, определяющие поведение
элемента:
visible — заставляет элемент сжаться или увеличиться, чтобы полностью отобразиться в заданном блоке (для графического содержимого элемента) или увеличивает размеры блока отображения (для текстового содержимого);
hidden — обрезает элемент в соответствии с размерами блока;
auto — добавляет полосы прокрутки к блоку отображения в случае, если размеры содержимого элемента превосходят размеры блока отображения;
scroll — добавляет полосы прокрутки к блоку отображения в любом случае.
На рис. 10.11 показан один и тот же раздел (элемент <DIV>) с разными значениями свойств overflow. Свойства width и eight раздела во всех вариантах его отображения одинаковы и соответствуют размерам первого элемента на рисунке (блок отображения).
Все представленные выше свойства влияют на расположение блока отображения элемента в плоскости окна браузера. Однако каскадные таблицы стилей позволяют позиционировать каждый блок и в направлении, перпендикулярном плоскости экрана, что влияет на отображение элемента при перекрытии его другим элементом. Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-index задает слой, в котором располагается элемент при отображении. Если слой расположен ближе к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением слоя, даже если последний и отображается позже. Следующие фрагменты документа HTML иллюстрируют использование свойства z-index, а на рис. 10.12 показаны результаты их отображения в окне браузера:
<
!--Фрагмент
1-->
<IMG STYLE="position:absolute; top:80px; left:0px; z-index:auto"
SRC=Ж.gif>
<DIV STYLE="position:absolute; top:115px; left:10px; width:150px;
color:white; background-color:blue; z-index:auto">
Две буквы "Ж"</DIV>
<IMG STYLE="position:absolute; top:120px; left:50px; z-index:auto"
SRC=Ж.gif>
<
!--Фрагмент
2-->
<IMG STYLE="position:absolute; top:260px; left:0px; z-index:3"
SRC=Ж.gif>
<DIV STYLE="position:absolute; top:295px; left:10px; width:150px;
color:white; background-color:blue; z-index:1">
Две буквы "Ж"</DIV>
<IMG STYLE="position:absolute; top:300px; left:50px; z-index:auto"
SRC=Ж.gif>
Если значением свойства z-index является auto, то элемент перекрывает все элементы с таким же значением этого свойства, но его перекрывает любой элемент со значением свойства z-index, отличным от auto. Первый фрагмент иллюстрирует значение auto. Второй элемент в потоке отображения перекрывает первый, а третий — все предыдущие. Во втором фрагменте третья буква Ж перекрывается всеми предыдущими элементами^ так как значение ее свойства z-index равно auto, а у предыдущих элементов это свойство определяет номер слоя. Первая буква Ж перекрывает текст, так как значение ее свойства z-index больше значения этого же свойства текста, хотя в потоке отображения она идет ранее.