Абсолютно позиционируемый элемент не игнорирует margin/padding родителя

Question

Почему элемент с position: absolute; не игнорирует margin/padding родителя с position: static;?

body {
  margin: 0;
}

.container-static {
  width: 1160px;
  height: 200px;
  margin: auto;
  background-color: blue;
}

.block-absolute {
  position: absolute;
  background-color: brown;
  width: 100px;
  height: 100px;
}

<body>
  <div class="container-static">
    <div class="block-absolute"></div>
  </div>
</body>

Answer 1

Почему элемент с position: absolute; не игнорирует margin/padding родителя с position: static;?

Дело в том что ты не указал элементу "как ему позиционироваться"... Потому он "встал" по умолчанию.

Если указать ему "как нужно позиционироваться" - все будет без "учета" такого родителя.

body {
  margin: 0;
}

.container-static {
  width: 50%;
  height: 200px;
  margin: auto;
  background-color: blue;
}

.block-absolute {
  position: absolute;
  top: 0;
  left: 0;
  background-color: brown;
  width: 100px;
  height: 100px;
}

<body>
  <div class="container-static">
    <div class="block-absolute"></div>
  </div>
</body>

БЛОГ НА HUSL

Абсолютно позиционируемый элемент не игнорирует margin/padding родителя

Ответы (1 шт):