How to make child element do not fill his parent when hover is performed in CSS?

Question

Here is a simple example :

.a{
    background-color : red;
    height : 30px;
    width : 100px;
    overflow : hidden;
}

.b{
    background-color : green;
    height : 30px;
    width : 100px;
    margin-top : 50px;  
}

.a:hover{
    display : block;
    background-color : blue;
    height : 30px;
    width : 100px;
    margin-top : 20px;
}

    <div class="a"></div>
    <div class="b"></div>

(cursor over the red box)

How to make the child (the green box) fixed in his position even if his parent moves down ?

Thank you all

Answer 1

Just got it;

.a{
    background-color : red;
    height : 30px;
    width : 100px;
    overflow : hidden;
    position : absolute;
}

.b{
    background-color : green;
    height : 30px;
    width : 100px;
    margin-top : 50px;
    position : absolute;
}

.a:hover{
    display : block;
    background-color : blue;
    height : 30px;
    width : 100px;
    margin-top : 20px;
}

    <div class="a"></div>
    <div class="b"></div>