Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ТЕХНОЛОГИЯ CSS.doc
Скачиваний:
4
Добавлен:
05.09.2019
Размер:
957.95 Кб
Скачать

26. Абсолютное позиционирование

    Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя:

  • left - для задания расстояния в пикселях от левого края окна (х-координата),

  • top - для задания расстояния в пикселях от верхнего края окна (у-координата).

    Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.

    Проиллюстрируем это на конкретном примере. Возьмем текст примера, результат просмотра которого в браузере приведен на предыдущем шаге на рисунке 3, и изменим его следующим образом:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

<SPAN STYLE="position:relative;

background-color:#90EE90">

Родитель, позиционированный относительно!

<IMG SRC="G.gif" STYLE="position:absolute; top:auto; left:auto;">

</SPAN>

</BODY>

</HTML>

    Результат просмотра этого документа в браузере изображен на рисунке 1.

Рис.1. Изменение положения абсолютно позиционированного при отсутствии параметров top и left

27. Относительное позиционирование

    Относительно позиционированные и статически позиционированные элементы после изъятия из исходного текста документа всех абсолютно позиционированных элементов (вместе с их потомками), образуют непрерывный поток отображения, в котором каждый последующий элемент позиционируется относительно конца предыдущего. Относительно позиционированные элементы, являющиеся потомками абсолютно позиционированных элементов, также позиционируются в конец своего элемента-родителя. Рисунок 1 демонстрирует отображение в окне браузера последовательности относительно позиционированных элементов страницы:

Рис.1. Относительно позиционированы все элементы

    Текст данного примера:

<HTML>

<HEAD>

<TITLE>Относительное позиционирование</TITLE>

</HEAD>

<BODY>

<SPAN STYLE="position:relative;

background-color: #90EE90">

Это изображение </SPAN>

<IMG SRC="G.gif" STYLE="position: relative;">

<SPAN STYLE="position:relative;

background-color: #90ff10";>

является изображением буквы "Ж".

</SPAN>

</BODY>

</HTML>

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

Рис.2. Изображение перекрывается третьим элементом

    Вот текст документа:

<HTML>

<HEAD>

<TITLE>Относительное позиционирование</TITLE>

</HEAD>

<BODY>

<SPAN STYLE="position:relative;

background-color: #90EE90">

Это изображение </SPAN>

<IMG SRC="G.gif" STYLE="position: absolute;">

<SPAN STYLE="position:relative;

background-color: #90ff10";>

является изображением буквы "Ж".

</SPAN>

</BODY>

</HTML>

    Здесь же видно, что последовательность отображения элементов определяется их заданием в исходном файле документа: элемент <IMG> задан вторым, поэтому он отображается раньше третьего элемента и перекрывается последним.