Керування відображенням CSS

У цьому розділі розглядаються спеціальні засоби керування відображенням елементів. За допомогою властивості display задається приналежність елемента певної категорії.

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

Таблиця 2.6. Властивості управління відображенням
Властивості	Опис	Типове	Застосування
display	Вигляд елементі	`inline`	До всіх елементів
position	Спосіб розміщення	`static`	До всіх елементів крім згенерованих
top	Верхня координата	`auto`	ДО та позиціонується елементів
bottom	Нижня координата	`auto`	ДО та позиціонується елементів
left	Ліва координата	`auto`	ДО та позиціонується елементів
right	Права координата	`none`	ДО та позиціонується елементів
float	Вигляд зміщення	`auto`	До всіх елементів крім згенерованих і розташованих
clear	Вирівнювання після плаваючого елементі	`none`	ДО блочних елементів

Вигляд елементі

block - блочний елемент
inline - внутристрочный елемент
list-item - елемент списку
marker - генерується елемент перед або після блоку
none - блок не генерується,
run-in - блок вдвигаемого тексту
compact - блок займає поле
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption - табличні елементи.

Спосіб розміщення

position:static|relative|absolute|fixed

static - статичне, звичайне розміщення в порядку описания зліва направо зверху вниз, при необхідності вставляються розриви рядків та сторінок
relative - відносне, теж звичайне, але можна додатково змістити елемент від своєї позиції властивостями top, left, bottom і right.
absolute - абсолютна, позиція (розмір) задаються властивостями top, left, bottom і right щодо батьківського блоку
fixed - фіксоване, як і абсолютна, але елемент фіксується до позиції перегляду (не переміщається при скролінгу).

Вигляд зміщення

float:left|right|none

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

left - плаваючий елемент зміщується вліво,
right - плаваючий елемент зміщується вправо
none - елемент не плаваючий.

Вирівнювання наступного елемента

clear:left|right|both|none

Спосіб вирівнювання наступного за плаваючим елемента задається значеннями:

left - верхнє поле елемента збільшується так, щоб на його вирівнювання зліва плаваючий елемент не впливав,
right - верхнє поле елемента збільшується так, щоб на його вирівнювання справа плаваючий елемент не впливав,
both - верхнє поле елемента збільшується так, щоб на його вирівнювання зліва і праворуч плаваючий елемент не впливав,
none - ніякі зміни у параметри елемента не вносяться.