Наезд одного div на другой при hover

#html #css

Здравствуйте, есть такая задача. Несколько блоков на сайте расположены друг под другом,
при наведении на первый, его высота увеличивается и нижний сьезжает вниз соотвтественно.
Подскажите возможно ли сделать так? упрощенная схема как это работает сейчас внизу
в коде. Возможно ли это сделать не оборачивая эти два блока в дополнительный? 



div{
width:200px;
height:100px;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.red:hover{
  height:150px;
}
1
2



    

Ответы

Ответ 1

вот так можно но это грубо, хотя зависит от ситуации, что именно тебе надо и как...



div {
  position: absolute;
  width: 200px;
  height: 100px;
}

.red {
  background-color: red;
}

.green {
  top: 100px;
  background-color: green;
}

.red:hover {
  height: 150px;
  z-index: 11;
}
1
2