16. Стилізація блоків

У цьому уроці веброзробка курси – ми розглянемо стилізацію блоків. А перевірити свої знання з цієї теми ви можете пройшовши тест. Сертифікат про проходження якого можна обміняти в адміністратора. Властивість CSS position вказує на те, як елемент буде позиціюватися в документі. top, right, bottom і left (en-US) визначають кінцеве розташування позиціонованих елементів.

Веб розробка курси: типи позиціювання:

• Позиціонований елемент – це елемент, у якого обчислене значення position є relative, absolute, fixed або sticky. (Іншими словами, це все, крім static.)
• Відносно елемент, що буде позиціюватися, є елементом, обчислене значення position якого є relative. Властивості top і bottom визначають зміщення по вертикалі від нормального становища; властивості left (en-US) і right задають горизонтальне усунення.
• Абсолютно позиціонований елемент – це елемент, чиє обчислене значення position є absolute або fixed. top, right, bottom і left (en-US) задають зміщення від країв елемента, що містить блок. (Коли містить блок є предком, щодо якого розташований елемент.) Якщо елемент має поля, вони додаються до зміщення. Елемент встановлює новий контекст форматування блоку (BFC) для вмісту.
• Елемент із липкою позицією — це елемент, у якого значення обчисленого position є sticky. Він розглядається як відносно позиціонований до тих пір, поки блок, що містить, не перетне зазначений поріг (наприклад, установка top у значення, відмінне від auto) всередині його кореня потоку (або в контейнері, в якому він прокручується), після чого він обробляється як « застряг» до тих пір, поки не зустріне протилежний край блоку, що містить його.

У багатьох випадках, позиціоновані елементи, які мають height і width встановлені у auto, мають розмір, відповідний їхньому вмісту. Однак не заміщувані, абсолютно позиціоновані елементи можна зробити такими, щоб вони заповнили доступний вертикальний простір, вказавши як top, так і bottom, і залишаючи height невизначеним (тобто , auto). Ними також можна заповнити доступний горизонтальний простір, вказавши як left (en-US), так і right, і залишаючи width як auto.

За винятком:

Щойно описаного випадку (абсолютно позиціонованих елементів, що заповнюють доступний простір):

• Якщо вказано top і bottom (технічно, не auto), пріоритет буде у top.
• Якщо вказано left і right: пріоритет буде у left, коли direction ltr (англійська мова, горизонтальна японська і т. д.), пріоритет буде у right, коли direction є rtl (перська, Арабська, іврит і т. д.).
  Веброзробка курси – швидкий спосіб навчитися створювати власні сайти.

Синтаксис

Властивість position вказується як одне ключове слово, яке вибрано зі списку значень нижче.

Значення:

static

Це значення дозволяє елементу перебувати у звичайному стані, розташованому на своєму місці в документі. Властивості top, right, bottom, left та z-index не застосовуються до даного елементу. Це значення за умовчуванням.

relative

Елемент буде позиціюватися відповідно до нормального потоку документа, а потім зміщується щодо себе на основі значень top, right, bottom та left. Усунення не впливає на положення будь-яких інших елементів; таким чином, простір, заданий для елемента в макеті сторінки, такий самий як якби позиція була static.

Це значення створює новий контекст накладання, коли значення z-index не є auto. Його вплив на елементи table-*-group, table-row, table-column, table-cell і table-caption не визначено.

absolute

Елемент видаляється зі звичайного потоку документів, і елемент у макеті сторінки не створюється пробілу. Він розташований щодо його найближчого щодо позиціонованого предка, якщо такий є; в іншому випадку він міститься відносно вихідного блоку. Його кінцева позиція визначається значеннями top, right, bottom, та left.

Це значення створює новий контекст накладання, коли значення z-index не є auto. Поля абсолютно позиціонованих коробок не повертаються з іншими полями.  Веброзробка курси – більше інформації про програмування.

fixed

Елемент вибивається зі звичайного потоку документа, і елемент у макеті сторінки не створюється простір. Він буде позиціюватися щодо вихідного містить блоку, встановленого viewport, за винятком випадків, коли один з його предків має властивість transform, perspective, або filter, встановлений на щось інше, крім none і в цьому випадку цей предок поводиться як містить блок. (Зверніть увагу, що існують неузгодженості браузера з perspective та filter, що сприяють змісту формування блоків.) Його кінцева позиція визначається значеннями top, right, bottom та left.

Це значення завжди створює новий контекст накладання. У друкованих документах елемент міститься в те саме положення на кожній сторінці.

sticky

Елемент буде позиціюватися відповідно до нормального потоку документа, а потім зміщується щодо його найближчого прокручування і містить блок (найближчий батьківський рівень блоку), включаючи елементи, пов’язані з таблицею, на основі значень top, right, bottom і left. Усунення не впливає на положення будь-яких інших елементів.

Це значення завжди створює новий контекст накладання. Зверніть увагу, що липкий елемент “прилипає” до його найближчого попередника, що має “механізм прокручування” (створений при overflow рівному hidden, scroll, auto або overlay), навіть якщо той не є найближчим предком, що фактично прокручує.

Формальний синтаксис

static | (en-US) relative | (en-US) absolute | (en-US) sticky | (en-US) fixed

Приклади

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

Щодо позиціонованих елементів зміщені на певну величину від їхньої звичайної позиції в документі, але без усунення, що впливає на інші елементи. У наведеному нижче прикладі зверніть увагу, як розміщуються інші елементи, ніби «Two» займало простір свого звичайного розташування.

HTML

CSS

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

Елементи, розташовані щодо один одного, залишаються у нормальному потоці документа. На противагу цьому елемент з абсолютним позиціюванням вибивається з потоку; таким чином, інші елементи розташовуються без урахування абсолютних. Абсолютно позиціонований елемент розташовується щодо його найближчого предка (який не є static). Якщо такого предка немає, абсолютний елемент буде позиціюватися щодо ICB , який містить блок кореневого елемента документа.

Простий приклад:

<h1>Абсолютное позиционирование</h1>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p class=”positioned”>По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота – это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, – как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src=”https://mdn.mozillademos.org/files/13360/long.jpg”></p>

body {
width: 500px;
margin: 0 auto;
}

p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}

span {
background: red;
border: 1px solid black;
}

.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}

Фіксоване позиціювання

Фіксоване позиціювання аналогічно абсолютному, за винятком того, що блок, що містить елемент, є початковим містить блоком, встановленим у вікні перегляду, якщо тільки у якогось предка не було transform, perspective, або властивості filter, відмінне від none, через що цей предок займає місце елементів, які містять блок. Це можна використовувати для створення “плавучого” елемента, який залишається в тому ж положенні незалежно від прокручування. У наведеному нижче прикладі вікно c id=”one” фіксується у 80 пікселях від верхньої частини сторінки та у 10 пікселях зліва. Навіть після прокручування воно залишається у тому ж місці щодо вікна перегляду.

HTML

Типове використання для липкого позиціювання

HTML