Почему абсолютно позиционированный блок не накладывается поверх другого?

Question

[WoodyAndBuzz]

Как сделать чтобы блок был поверх другого блока используя позиционирование?
https://codepen.io/EdWrightwesr/pen/poapqxQ

Answer 1

[Тимур Ковалев]

Ставим одному блоку position: absolute:

<div style="width: 500px; height: 500px; background-color: red; position: absolute;"></div>
<div style="width: 800px; height: 800px; background-color: black;"></div>

Тогда он будет поверх другого блока. Если нужно наоборот, тогда ставим другому блоку position: relative:

<div style="width: 500px; height: 500px; background-color: red; position: absolute;"></div>
<div style="width: 800px; height: 800px; background-color: black; position: relative"></div>

Comments

[WoodyAndBuzz]

а если мне принципиально надо чтобы блок с абсолютным позиционированием был прописан внизу?
https://codepen.io/EdWrightwesr/pen/poapqxQ

[black1277]

WoodyAndBuzz, так добавьте ему параметры позиции и он встанет как нужно

top: 50px;
left: 50px;

к примеру

[WoodyAndBuzz]

black1277, Ну мы разве не задаем поситион абсолют для того чтобы он поверх встал остальных блоков и как бы их обтекал и уходил в верхний левый угол, если конечно, не задавать определенные отступы?

[Тимур Ковалев]

WoodyAndBuzz, Можете подробно объяснить, что хотите видеть по итогу

[WoodyAndBuzz]

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

[Иван В]

WoodyAndBuzz,

Ну мы разве не задаем поситион абсолют для того чтобы он поверх встал остальных блоков

Это не так работает.

HTML - это документ. Элементы документа идут потоком, один за другим, позиционируясь относительно друг-друга.
position: absolute "выдергивает" элемент из потока, т.е. остальные элементы начинают позиционироваться, будто выдернутого элемента нет, а его мы можем "прибить" к нужному месту в интерфейсе. В этом заключается смысл position: absolute.
Но это не касается слоев отображения элементов. В HTML каждый следующий элемент "выше" предыдущего.
В примере есть два div'a, по порядку первый с абсолютной позицией, а второй обычный. Второй "выше" потому что в коде он идет следующим.
Это можно исправить или поменяв div'ы местами или задав им z-index.

Answer 2

[cherry_secret]

Все абсолютные и z-index - ом менять.

<div style='position:relative;'>
  <div style="position:absolute; width: 800px; height: 800px; background-color: black;"></div>
  <div style="width: 500px; height: 500px; background-color: red; position: absolute; z-index: 2;">
  </div>
</div>