Абсолютная и относительная ширина и высота положения

Я знаю, что такое абсолютное и относительное положение, но некоторые моменты до сих пор не очищены. для справки

CSS

.rel{
    position:relative;
    background:red;
} 
.abs{
    position:absolute;
    background:blue;
}

HTML:

<div class="rel">rel</div>
<div class="abs">abs</div>

теперь точки:

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

  • когда я даю высоту 100%, в относительном div нет эффекта, но абсолютный div занимает 100% высоты. почему?

  • когда я даю margin-top: 30px он сдвигает абсолютный div, но когда я даю top: 30px, тогда только относительный div-сдвиг. почему?

  • когда я не даю top:0 , left:0 абсолютному div, который занимает выше div height. почему?

Ответы

Ответ 1

  • Настройка position:absolute удаляет рассматриваемый элемент из обычного потока структуры документа. Поэтому, если вы явно не задали ширину, она не будет знать, насколько она будет широка. вы можете явно установить width:100%, если это тот эффект, который вам нужен.

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

  • Возможно, это связано с родительскими элементами вашего HTML, но я не могу помочь дальше, если вы не предоставите полный HTML и CSS своей страницы.

  • Значение по умолчанию для верхнего и левого свойств является автоматическим. Это означает, что браузер рассчитает эти настройки для вас и установит их там, где будет отображаться элемент, если у него не было position:absolute.