... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Схемы позиционирования. Фиксированные блоки.

 

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки


Фиксированные блоки

Ранее упоминалось одно довольно интересное значение свойства position—fixed. Вспомните, аналогичное значение имеет и свойство background. Подобно тому, как закрепляется и не прокручивается фон при задании background:fixed, так и блок, согласно спецификации CSS, с описанием position:fixed должен быть зафиксирован и находиться всегда в области просмотра страницы, т.е. также не должен прокручиваться.

Все было бы замечательно, но данное значение не поддерживается браузерами Internet Explorer, что делает его практически неприменимым. Однако браузеры Opera 5+, Netscape 6.1+ и Mozilla его прекрасно понимают, тогда как Internet Explorer воспринимает подобные блоки так, будто они расположены в нормальном потоке, что, естественно, неверно.

Рассмотрим конкретный пример: создадим два блока. Первый будетфиксированным и должен располагаться в левой верхней части окна браузера. Поместим в него, например, пункты меню. Ограничим ширину блока 100 пикселями.



#fix{
position: fixed;
left:0px;
top:0px;
widht:100px;
}

Второй блок должен прокручиваться, как обычный. Его мы позиционируем абсолютно со сдвигом вправо на 100 пикселей, чтобы он не "налезал" на фиксированный.

#move {
position: absolute;
left:100px;
top:0px;
}

Теперь сформируем из этих блоков страницу.

<DIV id="fix">
Пункт 1<BR>
Пункт 2<BR>
Пункт 3<BR>
Пункт 4
</DIV>
<DIV id="move">
Основной текст страницы должен прокручиваться<BR>
Основной текст страницы должен прокручиваться<BR>
Основной текст страницы должен прокручиваться<BR>
.......
</DIV>

В окне браузера Mozilla или Opera такая страница будет выглядеть так, как показано на рисунке - ОТКРЫТЬ - слева располагаются пункты меню, которые при прокрутке текста во втором блоке не перемещаются.

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

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены