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

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

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

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

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

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

position: absolute | relative | static | fixed

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

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

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

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

На изображении выше голубым цветом выделен блок <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. Обязательно попробуйте применить на практике данное значение свойства позиционирования.

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