Блоковий елемент в HTML-це такий елемент, який займає за замовчуванням всю ширину батьківського елемента. Батьківським елементом може бути інший блоковий елемент, або вікно браузера. Блоковому елементу за допомогою властивостей CSS можна задати ширину (width) і висоту (height). Позиціонуванням блокових елементів називається процес їх розташування всередині вікна браузера і відносного одного за допомогою CSS властивостей position, left, top, right і bottom. Властивість CSS position призначене для завдання одного з чотирьох доступних видів позиціонування: static (за замовчуванням), absolute (абсолютне), fixed (фіксована) і relative (відносне). Решта CSS властивості, а саме left, top, right і bottom призначені для завдання відстаней щодо лівого, верхнього, правого і нижнього краю батьківського елементу. Також блокові елементи при завданні певних властивостей можуть накладатися один одного, і цю можливість те саме можна використовувати на сайтах.
Позиціонування за замовчуванням (static)
Якщо ви не вказали position у блочного елемента або вказали static, що один і той же, то в такому випадку блокові елементи розташовуються по порядку. Причому наступний блок (наприклад: червоний) розташовується з нового рядка. Так само на дане позиціонування не діє завдання відстаней left, top, right і bottom.
Абсолютне позиціонування (absolute)
При абсолютному позиціонуванні положення елемента задається щодо країв вікна браузера за допомогою відстаней, що задаються властивостями left, top, right і bottom. Якщо вказати відстані left і right одночасно, і вони будуть суперечити між собою, то перевага віддається left, те ж саме стосується top і bottom, в яких більший пріоритет має відстань top. Абсолютне позиціонування застосовується дуже часто спільно з відносним позиціонуванням в дизайнерських цілях, коли необхідно розмістити різні елементи відносного один одного, так само може застосовуватися для створення випадаючих меню, розмітки сайту і т.д.
Фіксоване позиціювання (fixed)
Фіксоване позиціювання відрізняється від інших видів позиціонування і не переміщається разом з контентом при скролінгу сторінки. Блокові елементи з фіксованим позиціонуванням прив'язуються за допомогою властивостей left, top, right і bottom до країв вікна браузера. Фіксоване позиціювання застосовується для створення фреймових інтерфейсів (вікно браузера ділиться на кілька областей), фіксованого меню, фіксованого підвалу сайту і "постійних" блоків (перелік посилань, соціальні кнопки і т.д.).
Відносне позиціонування (relative)
Відносне позиціонування задається за допомогою завдання відстаней left, top, right і bottom щодо його поточного становища.
Однак такий стан блоку можна створити і за допомогою властивості margin (відступи).
Відносне позиціонування не цікаво використовувати саме по собі, воно в основному застосовується разом з абсолютним позиціонуванням.
Розглянемо варіанти:
18.02.15 21.5K Якщо розрізати будь-який сайт, створений на основі html, то перед вами постане якась послойная структура. Причому своїм зовнішнім виглядом вона буде схожа з листковим пирогом. Якщо вам так здається, то найімовірніше ви давно не їли. Тому спочатку вгамуєте свій голод, а потім ми розповімо вам про те, як розташувати шар div по центру вашого сайту:
Переваги верстки за допомогою тега
Існує два основних типи побудови структури сайту:
- таблична;
- Блокова.
Таблична верстка була домінуючою ще на зорі зародження інтернету. До її переваг можна віднести точність заданого позиціонування. Але, тим не менш, вона має явні недоліки. Головними з них є об'ємність коду і низька швидкість завантаження.
При використанні табличній верстки веб-сторінка не буде відображатися аж до повного завантаження. У той час як при використанні блоків div елементи відображаються відразу.
Крім високої швидкості завантаження блочне побудову сайту дозволяє в кілька разів зменшити обсяг коду html. У тому числі і за рахунок використання класів CSS.
Проте, табличну верстку слід використовувати для структуризації відображення даних на сторінці. Класичним прикладом її застосування є відображення таблиць.
Блочне побудову на основі тегів
також називають пошаровим, а самі блоки шарами. Це пов'язано з тим, що при використанні певних значень властивостей їх можна розміщувати один поверх іншого подібно верствам в Photoshop.
засоби позиціонування
У блокової верстці позиціонування шарів краще здійснювати за допомогою засобів каскадних таблиць стилів. Основною властивістю CSS, що відповідає за розташування
, Є float.
Синтаксис властивості:
float: left | right | none | inherit,
де:
- left - вирівнювання елементу по лівому краю екрану. Обтікання іншими елементами відбувається праворуч;
- right - вирівнювання праворуч, обтікання іншими елементами - зліва;
- none - обтікання не допускається;
- inherit - успадкування значення батьківського елемента.
Розглянемо полегшений приклад позиціонування блоків div за допомогою цієї властивості:
лівий блок
правий блок
Тепер постараємося за допомогою цього ж властивості розташувати третій div по центру сторінки. Але, на жаль, у float немає значення center. А при завданні новому блоку значення вирівнювання вправо або вліво він зсувається в зазначену бік. Тому залишається лише всім трьом блокам задати float: left:
Але і це не є оптимальним варіантом. При зменшенні вікна всі верстви шикуються в один ряд по вертикалі, а при збільшенні розмірів - прилипають до лівого краю вікна. Тому потрібен більш досконалий спосіб вирівнювання div по центру. центрування шарів
У наступному прикладі ми будемо використовувати шар-контейнер, в якому розмістимо інші елементи. Це вирішує проблему зсуву блоків один щодо одного при зміні розмірів вікна. Центрування контейнера посередині здійснюється за допомогою завдання властивостям margin нульового значення відступами від верхнього краю і auto з боків (margin: 0 auto):
лівий блок
центральний блок
правий блок
Цей же приклад показує, як можна відцентрувати div по горизонталі. А якщо трохи відредагувати наведений вище код, то можна домогтися вертикального вирівнювання блоків. Для цього потрібно лише змінити довжину шару-контейнера (зменшити його). Тобто після редагування його css клас повинен виглядати ось так: Після зміни все блоки вишикуються строго в ряд посередині. І їх становище не зміниться за будь-яких розмірах вікна браузера. Ось як виглядає таке центрування div по центру по вертикалі:
У наступному прикладі для центрування шарів всередині контейнера ми використовували ряд нових властивостей css:
Короткий опис властивостей css і їх значень, які ми використовували в даному прикладі для центрування div всередині div: - display: inline-block - вирівнює блоковий елемент в рядок і забезпечує його обтікання іншим елементом;
- vertical-align: middle - вирівнює елемент посередині щодо батьківського;
- margin-left - встановлює відступ зліва.
Як з шару зробити посилання
Як не дивно звучить, але таке можливо. Іноді div блок як посилання може знадобитися при верстці різних видів меню. Розглянемо практичний приклад реалізації шару-посилання:
Посилання на наш сайт
В даному прикладі за допомогою рядка display: block ми задали посиланням значення блочного елемента. А щоб вся висота блоку div стала посиланням, встановили height: 100%. Приховування або відображення блокових елементів
Блокові елементи надають більше можливостей для розширення функціоналу інтерфейсу, ніж застаріла табличная верстка. Часто буває, що дизайн сайту є унікальним і впізнаваним. Але за такий ексклюзив доводиться платити браком вільного місця.
Особливо це стосується головної сторінки, вартість розміщення реклами на якій є найвищою. Тому і з'являється проблема, куди б «впихнути» ще один рекламний банер. І тут вже вирівнюванням div по центру сторінки ніяк не звільнишся!
Більш раціональним рішенням є зробити який-небудь блок ховається. Ось простий приклад такої реалізації:
Це чарівна кнопка. Натискання на неї приховає або відобразить ховається блок.
Як ви ймовірно вже знаєте верстати сайт можна, використовуючи таблиці, в цьому випадку сторінка розбивається на осередки. А можна для цих цілей використовувати блоки, коли сторінка сайту складається з окремих елементів.
Напевно, не помилюся, якщо скажу, що при цьому серйозною проблемою для багатьох початківців веб-майстрів є завдання розташувати блоки в заданому місці веб-сторінки.
Однією з головних труднощів при верстці за допомогою блоків є позиціонування (вирівнювання) цих самих блоків.
Трохи про шарах (layers)
Думаю, багато хто з вас чули про таке поняття, як шар (layer). І, як правило, під шаром розуміється блок, заданий тегом
. Насправді все трохи не так.
В HTML не існує шарів. Це просто метафора. Коли мова йде про шарах, то під ними розуміється якийсь html контейнер (елемент), який може бути поміщений в певному місці веб-сторінки.
Другим помилкою є віднесення до верствам тільки блоку, заданого тегом
. Це теж неправильно. До них також можна віднести параграфи ( ), Списки (
) І інші елементи.
А тепер про ах.
Як вже говорилося вище, ввести інформацію про розташування можна будь-якого HTML елементу. Для цього немає потреби завжди використовувати тег
. Також використання даного тега не зобов'язує вас задавати йому будь-яке положення на веб-сторінці.
Сенс застосування блоку, заданого тегом
зводиться до укрупнення. Адже всередину його можна помістити інші елементи (параграфи, картинки, і тд.). Таким чином виходить великий блок, з різноманітним вмістом, який значно легше позиціонувати на веб-сторінці, ніж кожен з елементів окремо.
Позиціонування елементів.
Існує чотири основних типи позиціонування:
1. Статична (Static)
2. Абсолютна (Absolute)
3. Фіксована (Fixed)
4. Відносне (Relative)
Статична (Static)
Використовується як розташування «за замовчуванням». В цьому випадку браузер переглядає html код, розділяє його на елементи і складає з них сторінку. Виходить послідовність з ряду елементів. Виводяться вони в тому порядку, в якому вказані в html коді.
застосування параметрів left, top, right і bottom не призводить до якихось результатів.
Необхідно пам'ятати про статичному позиціонуванні, коли використовується відносне розташування.
Абсолютна (Absolute)
За допомогою абсолютного позиціонування задаються координати лівого верхнього кута блоку. При цьому відлік координат відбувається щодо розташування батьківського елемента. Якщо батьківським елементом є вікно браузера, тоді вирівнювання блоку відбувається відносно нього. Якщо існує інший елемент, всередині якого розташований блок, тоді вирівнювання відбувається вже щодо цього елемента.
Фіксована (Fixed)
Вже з назви стає ясно, що в даному випадку елемент фіксується. Він розташовується в певному місці веб-сторінки і нікуди не зрушується. Подібне вирівнювання часто застосовується по відношенню до спливаючих вікон, коли вони фіксуються по центру і не зміщуються при прокручуванні сторінки.
Відносне (Relative)
З цим видом позиціонування можуть бути складності. Його назва не зовсім вдале. Багато хто плутає відносне і абсолютне позиціонування елементів. Може здатися, що вирівнювання відбувається щодо батьківського елементу. А у випадку з абсолютним позиціонуванням - щодо вікна браузера. Але це не так.
Потрібно усвідомити, що розташування елемента в цьому випадку відбувається щодо його ж місця в статичному положенні. Це те, про що згадувалося вище.
Простіше кажучи, ви вказуєте браузеру, що необхідно пересунути елемент на стільки-то пікселів, щодо того місця, де він розташований за замовчуванням.
Існує ще один складний момент. Що станеться, якщо батьківський елемент має відносне позиціонування, а вкладений в нього елемент абсолютне? В цьому випадку відлік координат дочірнього елемента буде проводитися щодо батьківського елементу, з урахуванням його зміщення, якщо воно має місце.
Підведемо підсумок.
Отже, є властивість position. Це властивість може приймати 4 значення Static, Absolute, Fixed і Relative. За замовчуванням йде Static.
Коли ви вказуєте координати для елемента, необхідно також повідомити браузеру, яким чином він повинен ці координати відраховувати. Треба дати йому відправну точку.
Не забувайте, що при відсутності властивості position координати враховуватися не будуть, блок залишиться на колишньому місці, в своєму статичному положенні.
А тепер подивимося, яким чином задаються координати.
Для цих цілей застосовуються чотири види властивостей:
1. Top
2. Left
3. Right
4. Bottom
Top - позитивне значення (наприклад, 20px) зміщує блок на 20 пікселів вниз. Негативне значення (-20px) зміщує елемент на 20 пікселів верх. Все це відбувається щодо лівого верхнього кута.
Left - зміщення вліво або вправо, в залежності від знака. Щодо лівого верхнього кута.
Right- зміщення вправо і вліво, дивлячись який знак. Щодо правого верхнього кута.
Bottom - зміщення вгору або вниз, залежить від знака. Відбувається щодо лівого нижнього кута.
Ось код HTML:
А це CSS:
#1 {
position: relative;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: #CCCCCC;
}
#11 {
background-color: # 003399;
position: absolute;
bottom: -30px;
right: -50px;
width: 100px;
height: 100px;
}
#2 {
background-color: # 990066;
width: 200px;
height: 300px
}
Потренуйтеся.
Поки писав і сам розібрався.
Останнє оновлення: 28.04.2016
CSS надає можливості по позиціонуванню елемента, тобто ми можемо помістити елемент в певне місце на сторінці
Основною властивістю, які керують позиціонуванням в CSS, є властивість position. Це властивість може приймати одне з наступних значень:
static: стандартне позиціонування елемента, значення за замовчуванням
absolute: елемент позиціонується щодо кордонів елемента-контейнера, якщо у того властивість position не дорівнює static
relative: елемент позиціонується щодо його позиції за замовчуванням. Як правило, основна мета відносного позиціонування полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиционированния вкладених в нього елементів
fixed: елемент позиціонується щодо вікна бразуер, це дозволяє створити фіксовані елементи, які не змінюють положення при прокручуванні
Не слід одночасно застосовувати до елементу властивість float і будь-який тип позиціонування, крім static (тобто тип за замовчуванням).
абсолютне позиціонування
Область перегляду браузера має верхній, нижній, правий і лівий краю. Для кожного з цих чотирьох країв є відповідне властивість CSS: left (відступ від краю зліва), right (відступ від краю праворуч), top (відступ від краю контейнера зверху) і bottom (відступ знизу). Значення цих властивостей вказуються в пікселях, em або відсотках. Необов'язково задавати значення для всіх чотирьох сторін. Як правило, встановлюють тільки два значення - відступ від верхнього краю top і відступ від лівого краю left.
Блокова верстка в HTML5
HELLO WORLD
Тут елемент div з абсолютним позиціонуванням буде перебувати на 100 пікселів зліва від кордону області перегляду і на 50 знизу.
При цьому не має значення, що після цього елемента div йдуть якісь інші елементи. Даний блок div в будь-якому випадку буде позиціонуватися щодо кордонів області перегляду браузера.
Якщо елемент з абсоютно позиціонуванням розташовується в іншому контейнері, у якого в свою чергу значення властивості position не дорівнює static, то елемент позиціонується щодо кордонів контейнера:
Позиціонування в HTML5
відносне позиціонування
Відносне позиціонування також задається за допомогою значення relative. Для вказівки конкретної позиції, на яку зсувається елемент, застосовуються ті ж властивості top, left, right, bottom:
Позиціонування в HTML5
Властивість z-index
За замовчуванням при збігу у двох елементів кордонів, поверх іншого відображається той елемент, який визначений в розмітці html останнім. Однак властивість z-index дозволяє змінити порядок проходження елементів при їх накладенні. Як значення властивість приймає число. Елементи з великим значенням цієї властивості будуть відображатися поверх елементів з меншим значенням z-index.
наприклад:
Позиціонування в HTML5
Тепер додамо до стилю блоку redBlock нове правило:
RedBlock (z-index: 100; position: absolute; top: 20px; left: 50px; width: 80px; height: 80px; background-color: red;)
Тут z-index дорівнює 100. Але це не обов'язково має бути число 100. Так як у другого блоку z-index не визначений і фактично дорівнює нулю, то для redBlock ми можемо встановити у властивості z-index будь-яке значення більше нуля.
І тепер перший блок буде накладатися на другий, а не навпаки, як було на початку.
властивість position має наступні значення
static relative absolute fixed
Тільки спільно з ним застосовуються властивості (викл. Position: static;)
top bottom right left
Одночасно можуть бути присутніми
margin transform float (викл. position: absolute; і position: fixed;)
Додати порожній тег перед div з class \u003d "primer" -.
Вступ
Елементи на веб-сторінці займають певний простір. За аналогією з корабликами в грі "Морський бій". Між кораблями повинні бути порожні клітинки - margin.
Для того, щоб один елемент помістити поверх іншого, потрібно задати негативне значення для margin. Але тоді вміст тегів буде накладатися один на одного. За допомогою властивостей position і вони як би піднімають на рівень 2.
У природному порядку нижні теги в коді показані над верхніми. Завдяки z-index на рівні 2 можна самим визначити видимий елемент.
Статичного позиціонування - position: static;
position: static використовується за умовчанням і скасовує дію relative, absolute і fixed. Значення властивостей top, bottom, right, left ігноруються. При відсутності transform не враховується і z-index.
А
Б
В
Відносне позиціонування - position: relative;
Тому блоку, якому ми призначимо position: relative буде відданий пріоритет. Вміст нижнього елемента ховається.
А
Б
В
Для того, щоб розташувати блок Б поверх В, але нижче А, недостатньо привласнити і йому position: relative, оскільки в коді він стоїть нижче блоку А, а значить буде його перекривати.
А
Б
В
Потрібно поставити для елемента Б ще й z-index менше, ніж у блоку А.
А
Б
В
Замість margin при відносному позиціонуванні іноді краще використовувати властивості top, bottom, right, left. Точкою відліку для них є вихідне положення елемента. При цьому блок Б продовжує розташовуватися так, немов блок А знаходиться на колишньому місці - він залишає для нього порожній простір. Тому годі й чаклувати з порожнім div ().
А
Б
В
Повна аналогія з властивістю
А
Б
В
Для вбудованих елементів
Вбудовані елементи margin не зміщувати вниз і вгору (). Тільки top, bottom
БАБ
або
БАБ
Б А Б
Абсолютна і фіксоване позиціонування
Здавалося б, що блок з position: absolute повинен знаходитися вище position: relative, але це немає так, тут діє природний порядок. А значить z-index дозволить між ними вибрати пріоритетний елемент.
А
Б
В
Блок В ігнорує вихідне положення блоку Б, оскільки при position: absolute і position: fixed елемент перестає впливати на сусідні теги ні за допомогою своєї ширини / висоти, ні за допомогою float: left.
А
Б
В
Підсумкова таблиця
відмінні властивості position: static; position: relative;
transform: translate (); position: absolute; position: fixed;
накладення елементи краще не поміщати один на одного елементи має пріоритет видимості над static. Інші значення рівнозначні. Видимим буде той, хто нижче знаходиться в коді, або володіє великим значенням z-index
точка відліку top, right, bottom і left ігноруються вихідне положення елемента край батьківського елемента край вікна браузера
елементи навколо враховують поточний стан елемента враховують вихідне положення елемента ігнорують положення елемента
width: 100%; це ширина елемента (для вбудованого) / батьківського елемента (для блочного) батьківського елемента з position не в значенні static вікна браузера
при прокрутки сторінки елемент переміщається "Прилипає" до заданого місця вікна браузера
А тепер для закріплення матеріалу поклацати по кнопках на початку статті, подумайте чому сталися саме такі зміни.
Існує два основних типи побудови структури сайту:
- таблична;
- Блокова.
Таблична верстка була домінуючою ще на зорі зародження інтернету. До її переваг можна віднести точність заданого позиціонування. Але, тим не менш, вона має явні недоліки. Головними з них є об'ємність коду і низька швидкість завантаження.
При використанні табличній верстки веб-сторінка не буде відображатися аж до повного завантаження. У той час як при використанні блоків div елементи відображаються відразу.
Крім високої швидкості завантаження блочне побудову сайту дозволяє в кілька разів зменшити обсяг коду html. У тому числі і за рахунок використання класів CSS.
Проте, табличну верстку слід використовувати для структуризації відображення даних на сторінці. Класичним прикладом її застосування є відображення таблиць.
Блочне побудову на основі тегів
засоби позиціонування
У блокової верстці позиціонування шарів краще здійснювати за допомогою засобів каскадних таблиць стилів. Основною властивістю CSS, що відповідає за розташування
Синтаксис властивості:
float: left | right | none | inherit,
де:
- left - вирівнювання елементу по лівому краю екрану. Обтікання іншими елементами відбувається праворуч;
- right - вирівнювання праворуч, обтікання іншими елементами - зліва;
- none - обтікання не допускається;
- inherit - успадкування значення батьківського елемента.
Розглянемо полегшений приклад позиціонування блоків div за допомогою цієї властивості:
лівий блок
правий блок
Тепер постараємося за допомогою цього ж властивості розташувати третій div по центру сторінки. Але, на жаль, у float немає значення center. А при завданні новому блоку значення вирівнювання вправо або вліво він зсувається в зазначену бік. Тому залишається лише всім трьом блокам задати float: left:
Але і це не є оптимальним варіантом. При зменшенні вікна всі верстви шикуються в один ряд по вертикалі, а при збільшенні розмірів - прилипають до лівого краю вікна. Тому потрібен більш досконалий спосіб вирівнювання div по центру.
центрування шарів
У наступному прикладі ми будемо використовувати шар-контейнер, в якому розмістимо інші елементи. Це вирішує проблему зсуву блоків один щодо одного при зміні розмірів вікна. Центрування контейнера посередині здійснюється за допомогою завдання властивостям margin нульового значення відступами від верхнього краю і auto з боків (margin: 0 auto):
лівий блок
центральний блок
правий блок
Цей же приклад показує, як можна відцентрувати div по горизонталі. А якщо трохи відредагувати наведений вище код, то можна домогтися вертикального вирівнювання блоків. Для цього потрібно лише змінити довжину шару-контейнера (зменшити його). Тобто після редагування його css клас повинен виглядати ось так:
Після зміни все блоки вишикуються строго в ряд посередині. І їх становище не зміниться за будь-яких розмірах вікна браузера. Ось як виглядає таке центрування div по центру по вертикалі:
У наступному прикладі для центрування шарів всередині контейнера ми використовували ряд нових властивостей css:
Короткий опис властивостей css і їх значень, які ми використовували в даному прикладі для центрування div всередині div:
- display: inline-block - вирівнює блоковий елемент в рядок і забезпечує його обтікання іншим елементом;
- vertical-align: middle - вирівнює елемент посередині щодо батьківського;
- margin-left - встановлює відступ зліва.
Як з шару зробити посилання
Як не дивно звучить, але таке можливо. Іноді div блок як посилання може знадобитися при верстці різних видів меню. Розглянемо практичний приклад реалізації шару-посилання:
В даному прикладі за допомогою рядка display: block ми задали посиланням значення блочного елемента. А щоб вся висота блоку div стала посиланням, встановили height: 100%.
Приховування або відображення блокових елементів
Блокові елементи надають більше можливостей для розширення функціоналу інтерфейсу, ніж застаріла табличная верстка. Часто буває, що дизайн сайту є унікальним і впізнаваним. Але за такий ексклюзив доводиться платити браком вільного місця.
Особливо це стосується головної сторінки, вартість розміщення реклами на якій є найвищою. Тому і з'являється проблема, куди б «впихнути» ще один рекламний банер. І тут вже вирівнюванням div по центру сторінки ніяк не звільнишся!
Більш раціональним рішенням є зробити який-небудь блок ховається. Ось простий приклад такої реалізації:
Це чарівна кнопка. Натискання на неї приховає або відобразить ховається блок.
Як ви ймовірно вже знаєте верстати сайт можна, використовуючи таблиці, в цьому випадку сторінка розбивається на осередки. А можна для цих цілей використовувати блоки, коли сторінка сайту складається з окремих елементів.
Напевно, не помилюся, якщо скажу, що при цьому серйозною проблемою для багатьох початківців веб-майстрів є завдання розташувати блоки в заданому місці веб-сторінки.
Однією з головних труднощів при верстці за допомогою блоків є позиціонування (вирівнювання) цих самих блоків.
Трохи про шарах (layers)
Думаю, багато хто з вас чули про таке поняття, як шар (layer). І, як правило, під шаром розуміється блок, заданий тегом
В HTML не існує шарів. Це просто метафора. Коли мова йде про шарах, то під ними розуміється якийсь html контейнер (елемент), який може бути поміщений в певному місці веб-сторінки.
Другим помилкою є віднесення до верствам тільки блоку, заданого тегом
), Списки (
- ) І інші елементи.
А тепер про ах.
Як вже говорилося вище, ввести інформацію про розташування можна будь-якого HTML елементу. Для цього немає потреби завжди використовувати тег
. Також використання даного тега не зобов'язує вас задавати йому будь-яке положення на веб-сторінці.
Сенс застосування блоку, заданого тегом
зводиться до укрупнення. Адже всередину його можна помістити інші елементи (параграфи, картинки, і тд.). Таким чином виходить великий блок, з різноманітним вмістом, який значно легше позиціонувати на веб-сторінці, ніж кожен з елементів окремо.
Позиціонування елементів.
Існує чотири основних типи позиціонування:
1. Статична (Static)
2. Абсолютна (Absolute)
3. Фіксована (Fixed)
4. Відносне (Relative)
Статична (Static)
Використовується як розташування «за замовчуванням». В цьому випадку браузер переглядає html код, розділяє його на елементи і складає з них сторінку. Виходить послідовність з ряду елементів. Виводяться вони в тому порядку, в якому вказані в html коді.
застосування параметрів left, top, right і bottom не призводить до якихось результатів.
Необхідно пам'ятати про статичному позиціонуванні, коли використовується відносне розташування.
Абсолютна (Absolute)
За допомогою абсолютного позиціонування задаються координати лівого верхнього кута блоку. При цьому відлік координат відбувається щодо розташування батьківського елемента. Якщо батьківським елементом є вікно браузера, тоді вирівнювання блоку відбувається відносно нього. Якщо існує інший елемент, всередині якого розташований блок, тоді вирівнювання відбувається вже щодо цього елемента.
Фіксована (Fixed)
Вже з назви стає ясно, що в даному випадку елемент фіксується. Він розташовується в певному місці веб-сторінки і нікуди не зрушується. Подібне вирівнювання часто застосовується по відношенню до спливаючих вікон, коли вони фіксуються по центру і не зміщуються при прокручуванні сторінки.
Відносне (Relative)
З цим видом позиціонування можуть бути складності. Його назва не зовсім вдале. Багато хто плутає відносне і абсолютне позиціонування елементів. Може здатися, що вирівнювання відбувається щодо батьківського елементу. А у випадку з абсолютним позиціонуванням - щодо вікна браузера. Але це не так.
Потрібно усвідомити, що розташування елемента в цьому випадку відбувається щодо його ж місця в статичному положенні. Це те, про що згадувалося вище.
Простіше кажучи, ви вказуєте браузеру, що необхідно пересунути елемент на стільки-то пікселів, щодо того місця, де він розташований за замовчуванням.
Існує ще один складний момент. Що станеться, якщо батьківський елемент має відносне позиціонування, а вкладений в нього елемент абсолютне? В цьому випадку відлік координат дочірнього елемента буде проводитися щодо батьківського елементу, з урахуванням його зміщення, якщо воно має місце.
Підведемо підсумок.
Отже, є властивість position. Це властивість може приймати 4 значення Static, Absolute, Fixed і Relative. За замовчуванням йде Static.
Коли ви вказуєте координати для елемента, необхідно також повідомити браузеру, яким чином він повинен ці координати відраховувати. Треба дати йому відправну точку.
Не забувайте, що при відсутності властивості position координати враховуватися не будуть, блок залишиться на колишньому місці, в своєму статичному положенні.
А тепер подивимося, яким чином задаються координати.
Для цих цілей застосовуються чотири види властивостей:
1. Top
2. Left
3. Right
4. Bottom
Top - позитивне значення (наприклад, 20px) зміщує блок на 20 пікселів вниз. Негативне значення (-20px) зміщує елемент на 20 пікселів верх. Все це відбувається щодо лівого верхнього кута.
Left - зміщення вліво або вправо, в залежності від знака. Щодо лівого верхнього кута.
Right- зміщення вправо і вліво, дивлячись який знак. Щодо правого верхнього кута.
Bottom - зміщення вгору або вниз, залежить від знака. Відбувається щодо лівого нижнього кута.
Ось код HTML:
А це CSS:
#1 {
position: relative;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: #CCCCCC;
}
#11 {
background-color: # 003399;
position: absolute;
bottom: -30px;
right: -50px;
width: 100px;
height: 100px;
}
#2 {
background-color: # 990066;
width: 200px;
height: 300px
}
Потренуйтеся.
Поки писав і сам розібрався.
Останнє оновлення: 28.04.2016
CSS надає можливості по позиціонуванню елемента, тобто ми можемо помістити елемент в певне місце на сторінці
Основною властивістю, які керують позиціонуванням в CSS, є властивість position. Це властивість може приймати одне з наступних значень:
static: стандартне позиціонування елемента, значення за замовчуванням
absolute: елемент позиціонується щодо кордонів елемента-контейнера, якщо у того властивість position не дорівнює static
relative: елемент позиціонується щодо його позиції за замовчуванням. Як правило, основна мета відносного позиціонування полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиционированния вкладених в нього елементів
fixed: елемент позиціонується щодо вікна бразуер, це дозволяє створити фіксовані елементи, які не змінюють положення при прокручуванні
Не слід одночасно застосовувати до елементу властивість float і будь-який тип позиціонування, крім static (тобто тип за замовчуванням).
абсолютне позиціонування
Область перегляду браузера має верхній, нижній, правий і лівий краю. Для кожного з цих чотирьох країв є відповідне властивість CSS: left (відступ від краю зліва), right (відступ від краю праворуч), top (відступ від краю контейнера зверху) і bottom (відступ знизу). Значення цих властивостей вказуються в пікселях, em або відсотках. Необов'язково задавати значення для всіх чотирьох сторін. Як правило, встановлюють тільки два значення - відступ від верхнього краю top і відступ від лівого краю left.
Блокова верстка в HTML5
HELLO WORLD
Тут елемент div з абсолютним позиціонуванням буде перебувати на 100 пікселів зліва від кордону області перегляду і на 50 знизу.
При цьому не має значення, що після цього елемента div йдуть якісь інші елементи. Даний блок div в будь-якому випадку буде позиціонуватися щодо кордонів області перегляду браузера.
Якщо елемент з абсоютно позиціонуванням розташовується в іншому контейнері, у якого в свою чергу значення властивості position не дорівнює static, то елемент позиціонується щодо кордонів контейнера:
Позиціонування в HTML5
відносне позиціонування
Відносне позиціонування також задається за допомогою значення relative. Для вказівки конкретної позиції, на яку зсувається елемент, застосовуються ті ж властивості top, left, right, bottom:
Позиціонування в HTML5
Властивість z-index
За замовчуванням при збігу у двох елементів кордонів, поверх іншого відображається той елемент, який визначений в розмітці html останнім. Однак властивість z-index дозволяє змінити порядок проходження елементів при їх накладенні. Як значення властивість приймає число. Елементи з великим значенням цієї властивості будуть відображатися поверх елементів з меншим значенням z-index.
наприклад:
Позиціонування в HTML5
Тепер додамо до стилю блоку redBlock нове правило:
RedBlock (z-index: 100; position: absolute; top: 20px; left: 50px; width: 80px; height: 80px; background-color: red;)
Тут z-index дорівнює 100. Але це не обов'язково має бути число 100. Так як у другого блоку z-index не визначений і фактично дорівнює нулю, то для redBlock ми можемо встановити у властивості z-index будь-яке значення більше нуля.
І тепер перший блок буде накладатися на другий, а не навпаки, як було на початку.
властивість position має наступні значення
static relative absolute fixed
Тільки спільно з ним застосовуються властивості (викл. Position: static;)
top bottom right left
Одночасно можуть бути присутніми
margin transform float (викл. position: absolute; і position: fixed;)
Додати порожній тег перед div з class \u003d "primer" -.
Вступ
Елементи на веб-сторінці займають певний простір. За аналогією з корабликами в грі "Морський бій". Між кораблями повинні бути порожні клітинки - margin.
Для того, щоб один елемент помістити поверх іншого, потрібно задати негативне значення для margin. Але тоді вміст тегів буде накладатися один на одного. За допомогою властивостей position і вони як би піднімають на рівень 2.
У природному порядку нижні теги в коді показані над верхніми. Завдяки z-index на рівні 2 можна самим визначити видимий елемент.
Статичного позиціонування - position: static;
position: static використовується за умовчанням і скасовує дію relative, absolute і fixed. Значення властивостей top, bottom, right, left ігноруються. При відсутності transform не враховується і z-index.
А
Б
В
Відносне позиціонування - position: relative;
Тому блоку, якому ми призначимо position: relative буде відданий пріоритет. Вміст нижнього елемента ховається.
А
Б
В
Для того, щоб розташувати блок Б поверх В, але нижче А, недостатньо привласнити і йому position: relative, оскільки в коді він стоїть нижче блоку А, а значить буде його перекривати.
А
Б
В
Потрібно поставити для елемента Б ще й z-index менше, ніж у блоку А.
А
Б
В
Замість margin при відносному позиціонуванні іноді краще використовувати властивості top, bottom, right, left. Точкою відліку для них є вихідне положення елемента. При цьому блок Б продовжує розташовуватися так, немов блок А знаходиться на колишньому місці - він залишає для нього порожній простір. Тому годі й чаклувати з порожнім div ().
А
Б
В
Повна аналогія з властивістю
А
Б
В
Для вбудованих елементів
Вбудовані елементи margin не зміщувати вниз і вгору (). Тільки top, bottom
БАБ
або
БАБ
Б А Б
Абсолютна і фіксоване позиціонування
Здавалося б, що блок з position: absolute повинен знаходитися вище position: relative, але це немає так, тут діє природний порядок. А значить z-index дозволить між ними вибрати пріоритетний елемент.
А
Б
В
Блок В ігнорує вихідне положення блоку Б, оскільки при position: absolute і position: fixed елемент перестає впливати на сусідні теги ні за допомогою своєї ширини / висоти, ні за допомогою float: left.
А
Б
В
Підсумкова таблиця
відмінні властивості position: static; position: relative;
transform: translate (); position: absolute; position: fixed;
накладення елементи краще не поміщати один на одного елементи має пріоритет видимості над static. Інші значення рівнозначні. Видимим буде той, хто нижче знаходиться в коді, або володіє великим значенням z-index
точка відліку top, right, bottom і left ігноруються вихідне положення елемента край батьківського елемента край вікна браузера
елементи навколо враховують поточний стан елемента враховують вихідне положення елемента ігнорують положення елемента
width: 100%; це ширина елемента (для вбудованого) / батьківського елемента (для блочного) батьківського елемента з position не в значенні static вікна браузера
при прокрутки сторінки елемент переміщається "Прилипає" до заданого місця вікна браузера
А тепер для закріплення матеріалу поклацати по кнопках на початку статті, подумайте чому сталися саме такі зміни.
Як вже говорилося вище, ввести інформацію про розташування можна будь-якого HTML елементу. Для цього немає потреби завжди використовувати тег
Сенс застосування блоку, заданого тегом Існує чотири основних типи позиціонування: 1. Статична (Static) Використовується як розташування «за замовчуванням». В цьому випадку браузер переглядає html код, розділяє його на елементи і складає з них сторінку. Виходить послідовність з ряду елементів. Виводяться вони в тому порядку, в якому вказані в html коді. застосування параметрів left, top, right і bottom не призводить до якихось результатів. Необхідно пам'ятати про статичному позиціонуванні, коли використовується відносне розташування. За допомогою абсолютного позиціонування задаються координати лівого верхнього кута блоку. При цьому відлік координат відбувається щодо розташування батьківського елемента. Якщо батьківським елементом є вікно браузера, тоді вирівнювання блоку відбувається відносно нього. Якщо існує інший елемент, всередині якого розташований блок, тоді вирівнювання відбувається вже щодо цього елемента. Вже з назви стає ясно, що в даному випадку елемент фіксується. Він розташовується в певному місці веб-сторінки і нікуди не зрушується. Подібне вирівнювання часто застосовується по відношенню до спливаючих вікон, коли вони фіксуються по центру і не зміщуються при прокручуванні сторінки. З цим видом позиціонування можуть бути складності. Його назва не зовсім вдале. Багато хто плутає відносне і абсолютне позиціонування елементів. Може здатися, що вирівнювання відбувається щодо батьківського елементу. А у випадку з абсолютним позиціонуванням - щодо вікна браузера. Але це не так. Потрібно усвідомити, що розташування елемента в цьому випадку відбувається щодо його ж місця в статичному положенні. Це те, про що згадувалося вище. Простіше кажучи, ви вказуєте браузеру, що необхідно пересунути елемент на стільки-то пікселів, щодо того місця, де він розташований за замовчуванням. Існує ще один складний момент. Що станеться, якщо батьківський елемент має відносне позиціонування, а вкладений в нього елемент абсолютне? В цьому випадку відлік координат дочірнього елемента буде проводитися щодо батьківського елементу, з урахуванням його зміщення, якщо воно має місце. Отже, є властивість position. Це властивість може приймати 4 значення Static, Absolute, Fixed і Relative. За замовчуванням йде Static. Коли ви вказуєте координати для елемента, необхідно також повідомити браузеру, яким чином він повинен ці координати відраховувати. Треба дати йому відправну точку. Не забувайте, що при відсутності властивості position координати враховуватися не будуть, блок залишиться на колишньому місці, в своєму статичному положенні. Для цих цілей застосовуються чотири види властивостей: 1. Top Top - позитивне значення (наприклад, 20px) зміщує блок на 20 пікселів вниз. Негативне значення (-20px) зміщує елемент на 20 пікселів верх. Все це відбувається щодо лівого верхнього кута. Left - зміщення вліво або вправо, в залежності від знака. Щодо лівого верхнього кута. Right- зміщення вправо і вліво, дивлячись який знак. Щодо правого верхнього кута. Bottom - зміщення вгору або вниз, залежить від знака. Відбувається щодо лівого нижнього кута. Ось код HTML: А це CSS: #1 { #11 { #2 { Потренуйтеся. Поки писав і сам розібрався. Останнє оновлення: 28.04.2016 CSS надає можливості по позиціонуванню елемента, тобто ми можемо помістити елемент в певне місце на сторінці Основною властивістю, які керують позиціонуванням в CSS, є властивість position. Це властивість може приймати одне з наступних значень: static: стандартне позиціонування елемента, значення за замовчуванням absolute: елемент позиціонується щодо кордонів елемента-контейнера, якщо у того властивість position не дорівнює static relative: елемент позиціонується щодо його позиції за замовчуванням. Як правило, основна мета відносного позиціонування полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиционированния вкладених в нього елементів fixed: елемент позиціонується щодо вікна бразуер, це дозволяє створити фіксовані елементи, які не змінюють положення при прокручуванні Не слід одночасно застосовувати до елементу властивість float і будь-який тип позиціонування, крім static (тобто тип за замовчуванням). Область перегляду браузера має верхній, нижній, правий і лівий краю. Для кожного з цих чотирьох країв є відповідне властивість CSS: left (відступ від краю зліва), right (відступ від краю праворуч), top (відступ від краю контейнера зверху) і bottom (відступ знизу). Значення цих властивостей вказуються в пікселях, em або відсотках. Необов'язково задавати значення для всіх чотирьох сторін. Як правило, встановлюють тільки два значення - відступ від верхнього краю top і відступ від лівого краю left.
HELLO WORLD Тут елемент div з абсолютним позиціонуванням буде перебувати на 100 пікселів зліва від кордону області перегляду і на 50 знизу. При цьому не має значення, що після цього елемента div йдуть якісь інші елементи. Даний блок div в будь-якому випадку буде позиціонуватися щодо кордонів області перегляду браузера. Якщо елемент з абсоютно позиціонуванням розташовується в іншому контейнері, у якого в свою чергу значення властивості position не дорівнює static, то елемент позиціонується щодо кордонів контейнера:
Відносне позиціонування також задається за допомогою значення relative. Для вказівки конкретної позиції, на яку зсувається елемент, застосовуються ті ж властивості top, left, right, bottom:
За замовчуванням при збігу у двох елементів кордонів, поверх іншого відображається той елемент, який визначений в розмітці html останнім. Однак властивість z-index дозволяє змінити порядок проходження елементів при їх накладенні. Як значення властивість приймає число. Елементи з великим значенням цієї властивості будуть відображатися поверх елементів з меншим значенням z-index. наприклад:
Тепер додамо до стилю блоку redBlock нове правило: RedBlock (z-index: 100; position: absolute; top: 20px; left: 50px; width: 80px; height: 80px; background-color: red;) Тут z-index дорівнює 100. Але це не обов'язково має бути число 100. Так як у другого блоку z-index не визначений і фактично дорівнює нулю, то для redBlock ми можемо встановити у властивості z-index будь-яке значення більше нуля. І тепер перший блок буде накладатися на другий, а не навпаки, як було на початку. властивість position має наступні значення
Додати порожній тег перед div з class \u003d "primer" -. Елементи на веб-сторінці займають певний простір. За аналогією з корабликами в грі "Морський бій". Між кораблями повинні бути порожні клітинки - margin. Для того, щоб один елемент помістити поверх іншого, потрібно задати негативне значення для margin. Але тоді вміст тегів буде накладатися один на одного. За допомогою властивостей position і вони як би піднімають на рівень 2. У природному порядку нижні теги в коді показані над верхніми. Завдяки z-index на рівні 2 можна самим визначити видимий елемент. position: static використовується за умовчанням і скасовує дію relative, absolute і fixed. Значення властивостей top, bottom, right, left ігноруються. При відсутності transform не враховується і z-index.
Тому блоку, якому ми призначимо position: relative буде відданий пріоритет. Вміст нижнього елемента ховається.
Для того, щоб розташувати блок Б поверх В, але нижче А, недостатньо привласнити і йому position: relative, оскільки в коді він стоїть нижче блоку А, а значить буде його перекривати.
Потрібно поставити для елемента Б ще й z-index менше, ніж у блоку А.
Замість margin при відносному позиціонуванні іноді краще використовувати властивості top, bottom, right, left. Точкою відліку для них є вихідне положення елемента. При цьому блок Б продовжує розташовуватися так, немов блок А знаходиться на колишньому місці - він залишає для нього порожній простір. Тому годі й чаклувати з порожнім div ().
Повна аналогія з властивістю
Вбудовані елементи margin не зміщувати вниз і вгору (). Тільки top, bottom
Б А Б Здавалося б, що блок з position: absolute повинен знаходитися вище position: relative, але це немає так, тут діє природний порядок. А значить z-index дозволить між ними вибрати пріоритетний елемент.
Блок В ігнорує вихідне положення блоку Б, оскільки при position: absolute і position: fixed елемент перестає впливати на сусідні теги ні за допомогою своєї ширини / висоти, ні за допомогою float: left.
А тепер для закріплення матеріалу поклацати по кнопках на початку статті, подумайте чому сталися саме такі зміни.Позиціонування елементів.
2. Абсолютна (Absolute)
3. Фіксована (Fixed)
4. Відносне (Relative)Статична (Static)
Абсолютна (Absolute)
Фіксована (Fixed)
Відносне (Relative)
Підведемо підсумок.
А тепер подивимося, яким чином задаються координати.
2. Left
3. Right
4. Bottom
position: relative;
top: 100px;
left: 100px;
width: 500px;
height: 500px;
background-color: #CCCCCC;
}
background-color: # 003399;
position: absolute;
bottom: -30px;
right: -50px;
width: 100px;
height: 100px;
}
background-color: # 990066;
width: 200px;
height: 300px
}абсолютне позиціонування
відносне позиціонування
Властивість z-index
static relative absolute fixed
Тільки спільно з ним застосовуються властивості (викл. Position: static;)
top bottom right left
Одночасно можуть бути присутніми
margin transform float (викл. position: absolute; і position: fixed;) Вступ
Статичного позиціонування - position: static;
Відносне позиціонування - position: relative;
Для вбудованих елементів
Абсолютна і фіксоване позиціонування
Підсумкова таблиця
відмінні властивості position: static; position: relative;
transform: translate ();position: absolute; position: fixed;
накладення елементи краще не поміщати один на одного елементи має пріоритет видимості над static. Інші значення рівнозначні. Видимим буде той, хто нижче знаходиться в коді, або володіє великим значенням z-index
точка відліку top, right, bottom і left ігноруються вихідне положення елемента край батьківського елемента край вікна браузера
елементи навколо враховують поточний стан елемента враховують вихідне положення елемента ігнорують положення елемента
width: 100%; це ширина елемента (для вбудованого) / батьківського елемента (для блочного) батьківського елемента з position не в значенні static вікна браузера
при прокрутки сторінки елемент переміщається "Прилипає" до заданого місця вікна браузера
