Зміст
position
display
visibility
float
clear
overflow
z-index

Властивість POSITION - задає розміщення на сторінці

За замовчуванням (position: static)

<img src="img.jpg" width="150" align="right" style="position: static">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Відносно поточного місцезнаходження (position: relative)

Координати на відміну від абсолютного позиціонування, відраховуються від попереднього стану блоку. <img src="img.jpg" id="image" width="150" align="right"> #image{ position: relative; top: 50px; right: 50px" }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Абсолютне позиціонування (position: absolute)

Зазвичай для позиціонування застосовують саме цей тип. використовуючи ключові слова top, right, bottom,left вказують необхідні координати, які відраховуються від країв вікна браузера. <img src="img.jpg" id="image" width="150" align="right"> #image{ position: absolute; top: 30%; left: 67%" }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Прив'язане до точки на екрані (position: fixed)

Якщо потрібно зафіксувати блок, тобто щоб він не скролився, то необхідно вказати значення FIXED. <img src="img.jpg" id="image" width="150" align="right"> #image{ position: fixed; top: 20px; right: 10px" }
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet

Властивість DISPLAY - налаштовує відображення одного об'єкта подібно іншому об'єкту

Нехай об'єкту <div> задані наступні властивості: Нехай об'єкту <span> задані наступні властивості: Властивість visibility
div{ height:28px; width: 28px; border: 2px solid #66343A; background-color: #a5b0e8; }
span{ border: 2px solid #66343A; background-color: #DAA5E8; } Має параметри:
- visible - за замовчуванням
- hidden - прихований
- collapse - використовується для груп об'єктів
- initial - встановлює значення за замовчуванням
- inherit - наслідує від предка
Блочний елемент в строчний Блочний елемент в строчний, але зі збереженням блочних можливостей Строчний елемент в блочний Прихований visibility: hidden
Присвоємо об'єкту 3.div властивість display: inline і він буде відображатися як <span>: Присвоємо об'єкту 3.div властивість display: inline-block і він буде відображатися як <span>, але мати зовнішній вигляд як <div>: Присвоємо об'єкту 2.span властивість display: block і він буде відображатися як <div>, але мати зовнішній вигляд як <span>: Присвоємо об'єкту 3.div властивість display: none і таким чином приховаємо будь-які сліди його присутності: Присвоємо об'єкту 3.div властивість visibility: hidden і він стане невидимим, та сусідні блоки всеодно будуть його обтікати:
1.span 2.span
3.div
4.span 5.span 		1.span 2.span
3.div
4.span 5.span 		1.span 2.span 3.span 4.span
5.div
 1.span 2.span 4.span 5.span 1.span 2.span 4.span 5.span

Властивість FLOAT - налаштовує розміщення блоку щодо інших блоків

Обтікання справа Обтікання зліва Відсутність обтікання (значення за замовчуванням) Відсутність обтікання
Присвоємо об'єктам 1.div, 2.div і 4.div властивість float: right;, в результаті блоки будуть відображатися послідовно один за одним починаючи з лівого боку і перекривати блоки без заданої властивості обтікання: Присвоємо об'єктам 1.div, 2.div і 4.div властивість float: left;, в результаті блоки будуть відображатися послідовно один за одним і перекривати блоки без заданої властивості обтікання: Присвоємо об'єктам 1.div, 2.div і 4.div властивість float: none; (значення за замовчуванням), а об'єкту 3.div властивість float: right;: Присвоємо об'єктам 1.div, 2.div і 4.div властивість float: inherit;, а об'єкту 3.div властивість float: right;:

1.div

2.div
3.div

4.div

1.div

2.div
3.div

4.div

1.div

2.div

3.div

4.div

1.div

2.div

3.div

4.div

Властивість CLEAR - знадобиться, якщо необхідно розмістити блок нижче сусідніх блоків

Розміщення блоку нижче всіх лівосторонніх плаваючих блоків Розміщення блоку нижче всіх правосторонніх плаваючих блоків Розміщення блоку нижче всіх плаваючих блоків Ніяких особливостей розміщення блоку щодо інших блоків
Всім блокам присвоєна властивість float: left;, а блоку 3.div присвоєна також властивість clear: left;: Всім блокам присвоєна властивість float: right;, а блоку 3.div присвоєна також властивість clear: right;: Присвоємо блокам 1.div, 2.div і 6.div властивість float: left;, блокам 3.div, 4.div і 5.div - властивість float: right;, а блоку 4.div - властивість clear: both;: Присвоємо блокам 1.div і 2.div властивість float: left;, блокам 3.div, 4.div і 5.div - властивість float: right;, а блоку 4.div - властивість clear: none;:
1.div
2.div
3.div
4.div
1.div
2.div
3.div
4.div
1.div
2.div
3.div
4.div
5.div
6.div
1.div
2.div
3.div
4.div
5.div
Цю властивість зручно застосовувати, наприклад коли нам необхідно, щоб блок із текстом починався з правого рядка

Властивість OVERFLOW - визначає спосіб відображення об'єкту, якщо він вийшов за межі батьківського об'єкту

<div style="overflow: hidden"> <img src="img.jpg"> </div> <div style="overflow: scroll"> <img src="img.jpg"> </div> <div style="overflow: auto"> <img src="img.jpg"> </div> <div style="overflow: visible"> <img src="img.jpg"> </div>
Зображення просто обрізається Додаються смуги прокрутки Додаються смуги прокрутки у разі необхідності Зображення всеодно буде відображатися повністю

Властивість Z-INDEX - визначає порядок розміщення об'єктів один за одним

<div style="position: relative;"> <img src="img.png" style="position: absolute; right: 50px; top: 50px; z-index: 1;"> <img src="img.png" style="position: absolute; right: 65px; top: 65px; z-index: 2;"> <img src="img.png" style="position: absolute; right: 80px; top: 80px; z-index: 3;"> <img src="img.png" style="position: absolute; right:110px; top:110px; z-index: 4;"> <img src="img.png" style="position: absolute; right: 95px; top: 95px; z-index: 5;"> </div>