Страница 369 из 493 отрицательное значение z-index и являющимися частью контекста занесения в стек начального блока-контейнера. Например, спросите себя, что должно произойти в результате применения следующей разметки: <body> <р style="position:absolute; z-index; -l;">Where am I?</p> </body> Учитывая правила занесения в стек, элемент body должен находиться в том же контексте занесения в стек, что и блок его родителя, поэтому он принимается за 0. Он не образует новый контекст занесения в стек, поэтому абсолютно позиционированный элемент р размещается в том же контексте занесения в стек, что и элемент body (т. е. в начальном блоке-контейнере). Иначе говоря, абзац размещается позади элемента body- Если body имеет непрозрачный фон, абзац исчезнет. Таким, во всяком случае, был возможный результат в CSS2. В CSS2.1 правила занесения в стек изменились, поэтому элемент не может оказаться под фоном его контекста занесения в стек. Другими словами, рассматривается случай, когда элемент body образует блок-контейнер для своих потомков (если бы он был относительно позиционированным, например). Абсолютно позиционированный элемент, происходящий от элемента body, не может быть помещен под фоном body, хотя может располагаться под его содержимым. На момент написания данной книги Mozilla и родственные броузеры полностью скрывают абзац, даже если и для элемента body, и для элемента html задан прозрачный фон. Это ошибка. Другие агенты пользователя, такие как Internet Explorer, размещают абзац поверх фона body, даже если он у него есть. Согласно CSS2.1 это поведение правильное. Вывод таков, что отрицательные значения z-index могут привести к непредсказуемым результатам, поэтому задавать их надо осторожно. Фиксированное позиционирование Как следует из предыдущего раздела, фиксированное позиционирование - это практически то же, что и абсолютное позиционирование, только блоком-контейнером фиксированного элемента является окно просмотра. В этом случае элемент полностью удаляется из потока документа, и его положение никак не связано ни с одной частью документа. Есть ряд интересных вариантов применения фиксированного позиционирования. Прежде всего, с его помощью можно создать интерфейсы, организованные в виде фреймов. Рассмотрим рис. 10.56, на котором показана довольно распространенная схема компоновки. Это можно было бы сделать, применив следующие стили: divftheader {position:fixed; top:0; bottom:80%; left:20%; right:0; background:gray;} div#sidebar {position:fixed; top:0; bottom:0; left:0; right:80%; background:silver;}
|