How can I set the position so that when hovering over, block starts from the edge of the parent element, but overlaps the next element?

Question

css

So, we have 12 buttons, 4 pieces are displayed on my screen.

Everyone has exactly the same code (excl. - names):

.name
{
    position:static;   
    width:auto;
    height:100px;
    background-color:#F1AE0B;
}

When you hover over the button, a block pops up:

And here is the block code (also the same for everyone):

.block
{
    position:absolute;
    width:auto;
    height:auto;
    left:0;
    top:0;
    right:0;
    background:rgba(255,255,255, 0.75);
    display:none;
}

The problem is that the block, no matter which button it is attached to, is always displayed at the beginning of the page, as a result of which, when we reach the last button, we cannot understand the text of the block, only part of it is visible at the top (to which we but we won’t get it, since the block is displayed when you hover over the button):

Is there a solution so that the block starts not from the beginning of the page, but from the top border of the button, that is, like this:

And at the same time, the block should overlap the bottom buttons.
Thanks in advance.

Answer 1

jsfiddle.net/e0n6sey3/1 - like this?