| absolute |
Абсолютное позиционирование. Блок располагается относительно содержащего его блока:
Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Содержимое абсолютно позиционированного элемента не обтекает никакие другие блоки, поэтому они могут скрывать содержимое других блоков (или быть скрытыми сами), т.е. находиться над (под) ними (положение определяется с помощью свойства z-index). |
| fixed | Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. |
| relative | Относительное позиционирование. Положение элемента устанавливается относительно исходного места его размещения: добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. |
| static | Статичное позиционирование. Элементы отображаются как обычно, использование свойств left, top, right и bottom не приводит к каким-либо результатам. |
| sticky | Это сочетание относительного и фиксированного позиционирования: элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице. |
Пример:
position: absolute
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Позиционирование блочных элементов</title> </head> <body> <style> .block-1 { position: relative; /* позиционирование относительное */ background: #0026ff; /* синий фон */ left: 30px; /* положение элемента */ height: 160px; /* минимальная высота */ width: 90px; padding: 20px; /* поля */ border: 2px solid #000; /* границы */ } .block-2 { position: absolute; /* позиционирование абсолютное */ right: 0; /* положение элемента */ bottom: 0; background: #ffe601; /* жёлтый фон */ width: 80px; /* размеры элемента */ height: 80px; border: 5px solid rgb(255, 0, 0); /* границы */ } .block-3 { position: absolute; /* позиционирование абсолютное */ left: 10px; /* положение элемента */ bottom: 20px; background: #34ff01; /* жёлтый фон */ width: 80px; /* размеры элемента */ height: 80px; border: 5px solid rgb(255, 0, 0); /* границы */ z-index: 1; } </style> </head> <body> <div class="block-1"> <div class="block-2"></div> </div> <div class="block-3"></div> </body> </html> |
[свернуть]