Урок №12: позиционирование блоков в CSS
В CSS для позиционирования элементов страницы используются блоки div'ы. В отличие от табличный верстки, блочная имеет код меньшего объема и просто в изменении. Недостатком блочной верстки является разное отображение блоков в различных браузерах, что вынуждает писать кроссбраузерный код. Существует абсолютное, относительное и фиксированное позиционирование блоков в CSS, значение свойства position определяет какое именно позиционирование будет у блока - absolute, relative, fixed или значение по умолчанию - static. Рассмотрим каждое из них более детально.
Абсолютное позиционирование
Абсолютное позиционирование в CSS позволяет разместить блок в любом месте экрана независимо от того, где он находится в исходном коде, задается значением absolute. Координаты задаются с помощью отступов от четырех сторон экрана (top, left, right, bottom).
.absbox
{position: absolute;
width:150px;
height:50px;
top: 700px;
left: 500px;
border:1px solid green;
background:#C3E6F5;}
<div class="absbox">Содержимое блока </div>Блок absbox имеет абсолютное позиционирование, находится на расстоянии 700 пиксела сверху и 500 пиксела слева от начала экрана.
Содержимое блока div class="absbox"
Относительное позиционирование
В относительном позиционировании задается значением position:relative и параметры смещения. Смещения в данном случае будет происходить относительно положения этого блока по умолчанию и задается в четырех возможных направлениях: top, left, right, bottom.
.otnbox{
width:150px;
height:50px;
position:relative;
left:50px;
top:10px;
border:1px solid red;
background:#C3E6F5;}
<div class="otnbox">Содержимое блока</div>
Содержимое блока div class="otnbox"
Блок otnbox имеет относительное позиционирование, смещен на 50 пикселей вправо и на 10 пикселей вниз относительно его изначального положения.
Фиксированное позиционирование
Блок при фиксированном позиционировании не прокручивается вместе с содержимым страницы, а остается на месте. Задается такое позиционирование с помощью свойства position:fixed. Положение такого блока задается не от краев страницы, а от краев окна браузера.
.fixbox{
width:220px;
height:100px;
position:fixed;
right:200px;
bottom:50px;
border:1px solid skyblue;
background:#C3E6F5;}
<div class="fixbox">Пример фиксированного позиционирования</div>
Пример фиксированного позиционирования
Блок fixbox имеет фиксированное позиционирование, и будет находится в правом нижнем углу, независимо от прокрутки контента страницы (см. в нижнем правом углу, голубое окно "пример фиксированного позиционирования").
Во всех случаях позиционирования, блоки налаживаются поверх содержимого страницы, включая другие блоки.
Плавающие блоки
Плавающие блоки очень популярны при современной верстке сайтов. Они позволяют обтекать себя текстом или другим содержимым веб-страницы, подобно изображениям в HTML с атрибутом align. Такие блоки называются плавающими или "поплавки" и задаются свойством float, которое имеет такие значения:
- left - блок будет прижимается к левой стороне, остальные элементы будут обтекать его с правой стороны.
- right - блок будет прижимается к правой стороне, остальные элементы будут обтекать его с левой стороны.
- none - значение по умолчанию, блок не перемещается и позиционируется в зависимости от свойства position.
.box5{
width:300px;
height:100px;
float:right;
border:1px solid pink;
background:#C3E6F5;}
Пример плавающего блока, текст обтекает его с левой стороны, благодаря свойству float:right
Пример плавающего блока, который находится ниже правостороннего блока, благодаря свойству clear:right
В результате блок будет находиться с правой стороны, а обтекаемый его текст - с левой.
Для расположения одного блока под другим используется свойство clear, которое задает, какие стороны блока не могут быть обтекаемыми. Свойству clear может быть задано одно из следующих значений:
- left - блок расположен ниже, чем блоки левой стороны.
- right - блок расположен ниже, чем блоки правой стороны.
- both - блок расположен ниже всех плавающих блоков.
- none - значение по умолчанию, ограничений нет.
.box6{
width:300px;
height:100px;
float:right;
clear:right;
border:1px solid pink;
background:#C3E6F5;}
В результате блок box6 находится под блоком box5. Если во втором блоке убрать свойство clear:right, он будет находится на одной строке вместе с первым.
Далее рассмотрим свойство блоков display: Виды блоков и свойство Display
| 
R598551293139
