Понимание абсолютного и относительного положения: ширина, высота и многое другое

При работе с позиционированием элементов на веб-странице, понимание концепций Абсолютное и относительное положение имеет решающее значение. Давайте углубимся в четыре ключевых момента, которые часто вызывают вопросы:

1. Относительная и абсолютная ширина

Почему относительно позиционированный элемент div автоматически занимает 100% ширины, а абсолютно позиционированный элемент управления занимает только ширину содержимого?

Причина в том, что установка позиции :absolute удаляет элемент из обычного потока структуры документа. Без явного определения ширины браузер не может определить ширину абсолютно позиционированного элемента div. Чтобы добиться ширины 100 %, явно установите ширину: 100%.

2. Высота и относительное положение

Почему установка высоты в 100 % не влияет на относительно позиционированный элемент div, а абсолютно позиционированный элемент div занимает 100 % высоты?

Элемент с позицией :relative ведет себя аналогично элементу с положением:static с точки зрения его высоты. Таким образом, установка height:100% не будет иметь никакого эффекта, если родительский элемент не имеет определенной высоты. Напротив, абсолютно позиционированные элементы удаляются из потока документа и регулируют свою высоту в зависимости от высоты содержащего их элемента.

3. Margin-Top и Shift

Почему поле-top:30px смещает абсолютно позиционированный элемент div, а при использовании top:30px смещается только относительно позиционированный элемент div?

Это вероятно связанные с родительскими элементами в вашей структуре HTML. Без предоставления полного кода HTML и CSS трудно определить точную причину.

4. Абсолютная позиция без верхнего и левого

Если вы не указываете top:0 и left:0 для абсолютно позиционированного элемента div, почему он занимает пространство над элементом div перед ним?

Настройки по умолчанию для верхнего и левого свойств — автоматические. Это означает, что браузер автоматически вычисляет эти значения в зависимости от того, где бы находился элемент, если бы у него не было позиции: абсолютная. В результате абсолютно позиционированный элемент div появится над предыдущим элементом div без явного определения его положения.