Необходимо сверстать 2 раскрывающихся hover
'ом блока в двух рядах.
При наведении на верхние блоки, нижняя часть раскрывается, но не "настилается" на нижний блок (и, как я понимаю, попадает под него). z-index
проблему не решает, т. к. контекстные группы разные.
Как реализовать полное перекрытие выпадающим блоком любых других? На css
или js
, не имеет значения.
Спасибо.
.wrapper {
max-width: 500px;
font-size: 0;
}
.item {
display: inline-block;
position: relative;
text-decoration: none;
width: 240px;
height: 170px;
z-index: 3;
font-size: 16px;
}
.item-open {
display: none;
position: absolute;
top: 165px;
left: 0;
width: 240px;
height: 130px;
}
.item:hover {
background: red;
}
.item:hover .item-open {
background: red;
display: block;
z-index: 10;
}
<div class="wrapper">
<a href="" id="mydiv" class="item">
<span>Блок 1</span>
<div class="item-open"></div>
</a>
<a href="" class="item">
<span>Блок 2</span>
<div class="item-open"></div>
</a>
<a href="" class="item">
<span>Блок 3</span>
<div class="item-open"></div>
</a>
<a href="" class="item">
<span>Блок 4</span>
<div class="item-open"></div>
</a>
</div>
z-index: 3;
.