TML, CSS, СКРИПТЫ: практика создании сайтов

Говоря проще,

элемент, позиционированный с использованием фиксированной схемы, не

будет прокручиваться вместе с остальным содержимым окна браузера.

К сожалению, Internet Explorer не поддерживает фиксированную схему

позиционирования — причем IE5 вообще не отображает такого рода

элементы, a IE6 интерпретирует их согласно схеме static, размещая без каких-

либо изысков в нормальном потоке.

Свойства top, bottom, left и right позволяют задать смещения элементов

(с учетом полей, рамки и отступов) соответственно сверху, снизу, слева или

справа в соответствии с одной из схем, перечисленных выше, за

исключением static В большинстве случаев бывает достаточно двух подобных свойств.

Так, например, правило

#menu {top: ЮОрх; left: 20px}

смещает блок с идентификатором menu на 100 пикселов по вертикали вниз и

на 20 пикселов по горизонтали вправо — относительно нормального потока

при относительном позиционировании, либо относительно границ

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

Значениями свойств top, bottom, left и right могут быть величины, заданные

при помощи линейных единиц измерения, в процентах (относительно высоты

Глава 4. Использование блочной модели CSS2p/in верстки сложных веб-страниц 193

или ширины родительского элемента), а также ключевое слово auto,

используемое по умолчанию.

Разумеется, необходимы примеры, иллюстрирующие различные виды

позиционирования. Для начала рассмотрим простейший пример, использующий

схему static, определенную по умолчанию, а затем будем постепенно

усложнять задачу.

Листинг 4,9, Позиционирование блочных элементов в нормальном потоке

Ь «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd»>

Результат интерпретации кода, приведенного выше, иллюстрирует рис. 4.12.

Теперь применим к блоку с идентификатором second относительное

позиционирование, видоизменив код следующим образом:

#second {

position: relative;

top: 50px;

left: 50px;

background: #fffOcc;

border-color: #fcO;

}

На рис. 4.13 показано, как отображается модифицированный таким образом

документ.

Попробуем теперь изменить схему позиционирования для второго блока на

absolute, оставив остальные параметры неизменными:

#second {

position: absolute;

top: 50px;

left: 50px;

background: #fffOcc;

border-color: #fcO;

}

Глава 4. Использование блочной модели CSS2fl/m верстки сложных веб-страниц 195

I» Щайа $?**» $и# Г&раход З-акяадки

к^-?©&ГТЭ

I фаЮфЗЬйгДО ®^^Н

1 Первый блок

Г» -|

Г 8

И 8

Г *

U i

L _ .. J

р Третий блок

0

fer: -^Htirtiffc

Пфайт J GL1

-r ,*?«1

/&1

Рис. 4.12. Простейшая схема

позиционирования элементов — статическая

‘, . ч мМЖ

Й^ЙЙи» бил fi&mm ^кладки &«тр?и«*гм *

Первый блок

•Rtavvat* OJK>K

^t ~ ~ ~ ~ ~ ~ ,

Рис. 4.13. Отображение элемента,

использующего относительное

позиционирование

Внешний вид страницы, использующей правило, описанное в листинге 4.11,

продемонстрирован на рис. 4.14.

Наконец, заменим значение absolute на fixed:

\ Листинг 4.12. Применение фиксированной схемы позиционирования

#second {

position: fixed;

top: 50px;

left: 50px;

196 Часть II. Применение веб-технологий стороны клиента для создания сайтов

background: #fffOcc;

border-color: #fcO;

|ЩШВВНЕ5й!^%,л

Г !*&&* gP*«*3 «»S*Wl ПЗР^Х^Д &9*!ЯЭДЮ* ЙИС

О-’ф-ФФЙМ

^ &Мщ Started Q Litest Неас&ш

Первый блок

*~ «» «» «» «* «»:¦ •.»*¦¦»• Т. 7

1

! BlOpOH бЛ

1′ …

Г

1

1

i

! Tpi «—.«…-.-…«.

d ©

•:^i

!

J

*

i

i

i

i

i

i

J

,jj3ljji|

rpy«9WTW

Перейти

Cgpd

i

1

1

ш

Рис. 4.14.