Лого SiteHere.ru

Урок 18. Позиционирование. Часть 3


Здравствуй, уважаемый читатель.

Это третья часть восемнадцатого урока изучения позиционирования в CSS. В этом урок мы изучим значение fixed и значение static свойства позиционирования и рассмотрим их на примере. На этом мы завершим 18-й урок о позиционировании.


Перед изучением данного урока пройдите предыдущие уроки:


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2
Урок 14. Таблицы
Урок 15. Формы
Урок 16. Свойство float
Урок 17. Каркас на основе свойства float
Урок 18. Позиционирование. Часть 1
Урок 18. Позиционирование. Часть 2

Теория и практика

В этом уроке мы завершим рассматривать такое свойство как позиционирование. Для этого необходимо рассмотреть два значения данного свойства. Это значение fixed и значение static.

position: absolute | relative | static | fixed

Позиционирование fixed

Также для примера возьмем шаблон из прошлых уроков. Для того чтобы понять как работает данное значение будем работать с меню, которое находится в самом верху.

Фиксированное меню

Посмотреть примерСкачать

Давайте сделаем данное меню фиксированным. То есть при прокрутке страницы данное меню остается постоянно вверху:

1
2
3
4
5
6
7
8
9
10
11
#menu{
    position:fixed; /* устанавливаем фиксированное позиционирование */
    background-image: url('images/bg_menu_banner.png');
    background-repeat:repeat-x;
    height:84px;
    width:100%;
    margin:0;
    top:0;
    left:0;
    z-index;5; /* на данное значение пока что не смотрите*/
}

Как это выглядит в браузере:

Посмотреть примерСкачать

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

Позиционирование static

Я оставил данное значение на конец, потому что данное значение дается любому блоку по умолчанию. Т.е. если вы даже не будете задавать свойство позиционирования, по умолчанию ему присвоится значение position:static.


На этом заканчиваем изучение позиционирования в CSS. Обязательно пробуйте практически использовать данное свойство.

Больше практикуйтесь!

1 комментарий к записи
  • Ramil

    дайте пожалуйста ссылку на мини-курс по написанию шаблона

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *