Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 23.12.2024, 20:35
На головну » Підручники » Підручник CSS » Урок 14: Позиціонування елементів - Підручник CSS
Урок 14: Позиціонування елементів

За допомогою CSS-позиціювання ви можете розмістити елемент точно в потрібному місці сторінки. Разом з поплавками (див. Урок 13 ) позиціонування дає вам великі можливості для створення точного і навороченого дизайну.

У цьому уроці ми обговоримо наступне:

Принципи CSS-позиціювання

Уявімо вікно браузера як систему координат:



Принципи CSS-позиціювання - в тому, що ви можете розташувати бокс в системі координат де завгодно.

Скажімо, ми хочемо позиціонувати заголовок. При використанні боксової моделі (див. Урок 9 ) заголовок виглядає так:



Якщо ми хочемо розташувати його на 100px від верхньої межі документа і на 200px зліва, ми повинні ввести наступний код CSS:

h1 {
position:absolute;
top: 100px;
left: 200px;
}

Ось результат:



Як бачите, Позиціонування за допомогою CSS - дуже точна техніка при розміщенні елементів. Це набагато простіше, ніж використовувати таблиці, прозорі зображення або ще що-небудь подібне.

Абсолютне позиціонування

Елемент, позиційований абсолютно, не отримує ніякого простору до документі. Це означає, що після позиціонування він не залишає після себе порожній простір.

Для абсолютної позиціонування елемента властивість position повинно мати значення absolute. Ви можете використовувати значення left, right, top і bottom для розміщення боксу.

Як приклад абсолютного позиціонування ми розмістимо 4 бокси в кутах документа:

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

Показати приклад

Відносне позиціонування

Щоб позиціонувати елемент відносно, встановіть у властивості position значення relative. Різниця між відносним абсолютним позиціонуванням полягає в тому, як обраховується позиціонування.

Позиція елемента, що розміщується відносно, обраховується щодо його оригінальної позиції в документі. Це означає, що ви зміщуєте елемент вправо, вліво, вгору або вниз. Таким чином, елемент все ще займає в документі простір після позиціонування.

Як приклад відносного позиціонування спробуємо розмістити три малюнки щодо їх оригінального розташування на сторінці. Зверніть увагу, що малюнки залишили після усунення порожній простір на своїх оригінальних позиціях у документі:

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

Показати приклад

Резюме

В останніх двох уроках ви навчилися створювати поплавці й позиціонувати елементи. Ці два методи дають вам певні переваги при конструюванні сторінок без необхідності використовувати старі методи на кшталт таблиць і прозорих зображень в HTML. Замість них використовуйте CSS. Це точніше, має певні переваги і набагато простіше в роботі.
<< Урок 13: Спливаючі елементи (поплавці)
Всього коментарів: 2
2 g-iryna  
0
Дякую за дуже корисний підручник. Після перегляду різноманітних відео уроків в голові була каша, а тепер все поскладалося на полички :)))

1 Mind's Dance  
0
Паралакс, ефект анімації, за допопомогою позиціонування в CSS - http://mindsdance.wordpress.com/2012/03/28/css-paralax-post/

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]