Как сделать дочерний элемент не заполнять его родительский элемент, когда наведение выполняется в CSS?

Question

Вот простой пример:

.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)

Как сделать ребенка (зеленый ящик), установленный в его положении, даже если его родитель движется вниз?

Спасибо всем

Answer 1

Только что получил;

.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>