Лого SiteHere.ru

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


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

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


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


Урок 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

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

В прошлом уроке мы рассмотрели значение absolute свойства позиционирования.

В этом уроке мы рассмотрим значение relative свойства позиционирования:

position: absolute | relative | static | fixed

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

Для примера возьмем шаблон из прошлого урока. Мы будет рассматривать данное значение на примере блока, который обведенный коричневым цветом:

Позиционирование без relative

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


Но вы наверное заметили еще в прошлом уроке, у данного шаблона этот блок был приподнят надо блоком выше. После применения к этому блоку свойства position:relative происходит следующее: для данного блока меняются начальные координаты. Если при использовании position:absolute позиционирование происходит относительно начала окна, то в этом случае позиционирование происходит относительно блока в котором блок со значением relative находится. Более наглядно на изображении ниже:

Выделен блок wrapper

На изображении выше голубым цветом выделен блок <div id="wrapper">, а желтым прямоугольником выделен блок <div id="overBlock">. Как видите для него координаты отсчитываются относительно блока в котором он находится, то есть в блока <div id="wrapper">.

Далее с помощью уже знакомого, из прошлого урока, свойства top изменяем положение блока так как нам надо:

1
2
3
4
5
6
7
8
9
#overBlock{
    width:972px;
    height:150px;
    background-image: url('images/over-block.png');
    background-repeat:no-repeat;
    margin:0 auto;
    position:relative;
    top:-55px; /* положение относительно блока в котором находится данный блок */
}

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

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


На этом всё. Жду вас в следующем уроке, в котором мы закончим говорить о позиционировании в CSS. Обязательно попробуйте применить на практике данное значение свойства позиционирования.

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

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

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