Урок 18. Позиционирование элементов. Часть 1

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

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

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

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

Данное свойство имеет несколько значений:

position: absolute | relative | static | fixed

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

В этом уроке мы изучим только первое значение свойства. Код html страницы я не буду здесь выкладывать, а только ссылки на скачивание и просмотр примера в браузере, потому что код будет занимать много места на странице. Создадим блок <div id="corner"> и применим для данного блока свойство position:absolute:

1
2
3
4
5
6
7

#corner{
    background-image: url('images/corner.png');
    background-repeat:no-repeat;
    width:176px;
    height:175px;
    position:absolute;
}

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

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

Как видите данный блок стал «над другими» блоками. Даже несмотря на то что данный блок находился бы в каком-нибудь блоке. Больше он подчинятся свойству блока родителя не будет. Но данный блок находится в положении не очень удобном для нас. Чтобы спозиционировать данный блок существуют свойства: top, left, right и bottom. Более подробно я расскажу в мини-курсе по созданию шаблона. Давайте разместим данную картинку с сюрпризом сразу после меню:

1
2
3
4
5
6
7
8
9

#corner{
    background-image: url('images/corner.png');
    background-repeat:no-repeat;
    width:176px;
    height:175px;
    position:absolute;
    top:68px;
    left:0;
}

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

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

На этом сегодня закончим. В следующем уроке мы рассмотрим значение relative свойства position. Попробуйте поработать с данным свойством. Здесь нет ничего сложного как видите.

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