Наиболее часто используемые свойства макета в CSS — это Float (подробное объяснение плавающего свойства CSS Float), а другое — свойство позиционирования CSS Position.
1. положение: статическое
Позиционирование всех элементов по умолчанию: позиция:статическое, что означает, что элемент не позиционируется и появляется там, где он должен быть в документе.
Вообще говоря, вам не нужно указывать позицию:static, если вы не хотите переопределить ранее установленное позиционирование.
#див-1 {
положение: статическое;
}
2. положение: относительное
Если вы установите положение: относительное, вы можете использовать верх, низ, лево и право, чтобы переместить элемент относительно того места, где он должен появиться в документе. [Это означает, что элемент фактически по-прежнему занимает исходное положение в документе, но визуально перемещается относительно своего исходного положения в документе]
#див-1 {
положение: родственник;
верх: 20 пикселей;
слева: -40 пикселей;
}
3. позиция: абсолютная
Если указана позиция:absolute, элемент находится за пределами документа (то есть он больше не занимает позицию в документе) и может быть точно позиционирован в соответствии с заданными верхним, нижним, левым и правым.
#div-1a {
позиция: абсолютная;
верх: 0;
правильно: 0;
ширина: 200 пикселей;
}