Внешний вид страницы, содержащей элемент,
позиционированный в абсолютных координатах
Поначалу результат покажется тем же самым. Однако если уменьшить
размеры окошка браузера до состояния, когда содержимое можно будет
прокручивать по вертикали, мы увидим разницу: блок, позиционированный при
помощи схемы absolute, прокручивается вместе с остальным содержимым окна,
тогда как элемент, использующий схему позиционирования fixed, остается
на своем месте, словно вкопанный (рис. 4.15). Подчеркиваю, что в IE схема
fixed не поддерживается, хотя некоторые разработчики умудряются
добиваться похожего эффекта при помощи JavaScript, что, впрочем, в любом
случае не говорит в пользу браузера от Microsoft…
Полезно рассмотреть еще одно свойство, тесно связанное с
позиционированием элементов — z-mdex. Если свойства top, bottom, left и right
определяют местоположение блока на плоскости, то z-index управляет размещением
блоков, образно говоря, в «трехмерном» пространстве, вдоль «оси z»,
перпендикулярной плоскости экрана (листа бумаги и т. п.).
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 197
Щ ^’^»ятШ^^ШШг^Ш^^^ •wll
|ид Я&яхяд $#юдки {$дагру»до|
.о-
9»
Второй блок
Tpt
¦ Пфщ
Готово
Г-~ — — —
t Второй блок
I
i
i
i
Tpf
I
L-.-i.
wg
Готово
Рис. 4.15. Результат прокрутки содержимого окна браузера:
слева — страница, использующая код, описанный в листинге 4.11,
справа — страница, применяющая правило, представленное в листинге 4.12
Элементы, схема позиционирования которых отлична от static, часто
«наезжают» друг на друга, перекрываются. Как раз для того, чтобы определить
порядок наложения элементов, и используется свойство z-index. Оно
применимо ко всем элементам, для которых определено отличное от static значение
СВОЙСТВа position.
В качестве значения свойства z-index, помимо традиционного ключевого
слова auto, использующегося по умолчанию, может выступать любое целое
число. Элемент с большим значением z-index будет располагаться «выше»,
перекрывая собой элемент с меньшим значением z-index.
Рассмотрим такой пример:
[ Листинг 4.13. Два абсолютно позиционированных блока
^ "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd,,>
198 Часть II. Применение веб-технологий стороны клиента для создания сайтов
'©V
-^11
Рис. 4.16. Отображение страницы, код которой приведен в листинге 4.13
Второй блок, будучи определен в разметке позже первого, "наползает" на
него. Отодвинуть второй блок "на задний план", не внося изменений в код
разметки, можно, воспользовавшись свойством z-index:
[Листинг 4.14. ПфйШйёние свойства з-index для управления наложением У"^^Щ
\ блоков !
#first {
z-index: 2;
top: 50px;
left: 50px;
background: #ccfOff;
border-color: #0cf;
}
#second {
z-index: 1;
top: 150px;
left: 150px;
200 Часть II. Применение веб-технологий стороны клиента для создания сайтов
background: #fffOcc;
border-color: #fcO;
}
Эффект, полученный в результате модификации кода, иллюстрирует рис. 4.17.
|Щ88
I
|ф*
^^Я
Правка
ф> *
;¦-., ¦ , .Jal?i|
Цид Г1§рз>к>А ?зкяэдкн ijjHCTpyr^HTM Сщиизкз О ,' |
(5^ ^ Ш l'U f'le:///2:/examples/04/14/.ndex.html J*j © П$ре#ТИ |LGl j
| fffe
к
ц
к
р
1
| Готово
1 *
% Первый блок $
%
k-
1
!
. ***
ЛОК""
1
L-
>C"x%V^>'^ ^ s" *^Л
";^';й::-:::-1| •]
>1
i
i !
1 I
i ]
i ]
i !
1 |
- ~ J
:~*ЧЖ#^^^^ J
Рис. 4.17.
|
5th Фев 2011
|
Теги:
|
