Фиксированное позиционирование

Как следует из предыдущего раздела, фиксированное позиционирование – это практически то же, что и абсолютное позиционирование, только блоком-контейнером фиксированного элемента является окно просмотра. В этом случае элемент полностью удаляется из потока документа, и его положение никак не связано ни с одной частью документа. Есть ряд интересных вариантов применения фиксированного позиционирования. Прежде всего, с его помощью можно создать интерфейсы, организованные в виде фреймов. Это можно было бы сделать, применив следующие стили:

div#header {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;}

Заголовок и врезка будут зафиксированы сверху и сбоку окна просмотра, где они будут оставаться независимо от прокручивания документа. Недостаток здесь в том, что документ будет перекрываться фиксированными элементами. Поэтому остальное содержимое, вероятно, должно находиться в собственном div и характеризоваться таким стилем:

div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: scroll; background: white;}

Также с помощью добавления соответствующих полей можно было бы создать небольшие зазоры между тремя позиционированными элементами div:

body {background: black; color: silver;} /* colors for safety's sake */
div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;
background: gray; margin-bottom: 2px; color: yellow;}
div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;
background: silver; margin-right: 2px; color: maroon;}
div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;
overflow: auto; background: white; color: black;}

Исходя из этого в качестве фона body можно было бы применить мозаичное изображение.


Это изображение просматривалось бы через зазоры, созданные полями, которые, конечно, можно было бы расширить, если бы автор счел это уместным. Другое применение фиксированного позиционирования – размещение на экране «постоянных» элементов, таких как краткий перечень ссылок. Постоянный нижний колонтитул с данными об авторском праве и другой информацией можно было бы создать так:

div#footer {position: fixed; bottom: 0; width: 100%; height: auto;}

В результате нижний колонтитул разместится внизу окна просмотра и будет оставаться там, несмотря на прокрутку документа. Один из недостатков фиксированного позиционирования – оно не поддерживается Internet Explorer для Windows до версии IE7. Существуют обходные приемы, основанные на применении JavaScript, позволяющие в некоторой степени реализовать эту поддержку в более старых версиях IE/Win, но они не всегда приемлемы, потому что в этом случае результат намного менее привлекателен, чем при полной поддержке фиксированного позиционирования. Другая возможность – в IE/Win позиционировать элемент абсолютно и применять фиксированное позиционирование в более совершенных броузерах, хотя такой вариант подходит не для всех макетов..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Блок-контейнер
Блоки-контейнеры и абсолютно позиционированные элементы
Видимость элементов
Задание ширины и высоты
Запрет на обтекание