Как расположить div поверх других блоков div?

Question

Как расположить div поверх других блоков div? Чтобы было как на рисунке. Тот div, который нужен поверх других, выделен синим цветом (остальные - белые).

Answer 1

используйте свойства position: absolute; и z-index: 100 (например 100, просто чтобы быть выше остальных) для позиционирования требуемого блока

.block {
  width: 100px;
  height: 25px;
  
  margin-bottom:  10px;
  
  border: 1px solid black;
  background: white;
}

.super {
  position: absolute;
  z-index:  100;
  top:      45px;
  
  width:    50px;
  height:   75px;
  
  background: rgba(0, 0, 255, 0.5);
}

<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'block'></div>
<div class = 'super'></div>

Answer 2

Используйте позиционирование CSS. В данном случае надо второму белому блоку задать свойство position: relative;, а синему блоку задать position: absolute;, чтобы он позиционировался относительно второго белого блока. Не забудьте указать top: 0; и left: 0;. Подробнее можно почитать здесь или здесь

БЛОГ НА HUSL

Как расположить div поверх других блоков div?

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