JSFiddle - React, Tailwind, and code Playground
HTML
<div class="block">
<div class="block-inner">
<button class="btn">
Кнопка
<div class="block-pos">
Блок position: absolute;
</div>
</button>
<button class="btn">
Кнопка
<div class="block-pos">
Блок position: absolute;
</div>
</button>
<button class="btn">
Кнопка
<div class="block-pos">
Блок position: absolute;
</div>
</button>
<button class="btn">
Кнопка
<div class="block-pos">
Блок position: absolute;
</div>
</button>
</div>
</div>
CSS
.block {
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
.btn {
width: 100%;
margin-bottom: 20px;
position: relative;
}
.block-pos {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
display: none;
height: 150px;
width: 100%;
z-index: 2;
pointer-events:none;
}
.btn:hover .block-pos {
display: block;
}