Вывод блока на передний план при hover?

Question

[Gregory]

Добрый день. Подскажите, пожалуйста, как правильно сделать так, чтобы при наведении на блок 1, у которого меняются размеры, блок 2 не уезжал вниз, а вставал бы на задний план?

Т.е. когда я навожу на красный блок мышь появляется кнопка, и блок становится больше, а зеленый сдвигается вниз. Мне нужно все то же самое, чтобы красный блок увеличивался, но при этом налазил на зеленый, а не смещал его ниже.

Вот пример:

https://jsfiddle.net/wa6g1bd2/

Спасибо.

Comments

[one_day]

.item1 {
  position: absolute;
  width: 100px;
  padding: 100px;
  background-color: red;
  z-index: 1;
}
.item2 {
  position: absolute;
  top: 200px;
  width: 100px;
  padding: 100px;
  background-color: green;
}

[Gregory]

one_day, Ну... в общем, конечно работает, но что делать если у меня этих блоков много.. это вообще календарь с числами и при наведении на число должен увеличиваться размер и появляться кнопка.. Я же не могу каждому нижнему элементу позиционирование смещать на высоту верхнего блока ((

[one_day]

Groyreg, https://codepen.io/one_day/pen/YrxgeM

[Gregory]

one_day, Вот!!! блин отличное решение просто замечательно!!! Огромное Вам спасибо!

Answer 1

[Exploding]

Вот так наверно надо?
Плюх с transition уже сами добавите

Comments

[Gregory]

Ну вроде того, но как быть если это сетка блоков как в календаре, ну т.е. мое конечное решение должно быть, что я навожу на дату и появляется кнопка добавить событие, но сейчас у меня остальные цифры смещаются при этом.. а абсолютное позиционирование задается нижнему блоку, а в календаре блоки динамичны..

[Exploding]

Groyreg, надо было сразу так и сказать в условии, а то не понятно что нужно получить.
Вот ваш календарь

[Gregory]

Exploding, Спасибо, работает буду знать.