Лого SiteHere.ru

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

Урок 18. Позиционирование

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

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


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


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

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

Позиционирование элементов на странице является мощнейшей силой 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;
}

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

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. Попробуйте поработать с данным свойством. Здесь нет ничего сложного как видите.

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

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

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