css - 将鼠标悬停在 div 上时，div 会消失或留下空白

Question

我之前在这里问过这个问题div disappears when hovering over it并用相对位置替换边距解决了问题，但现在我得到了空白 http://jsfiddle.net/x3a6frgx/3/ (注意 div2 和底部边框之间的空间)我该如何解决？
CSS 代码:

#body {
    border-width: 10px;
    border-color: red;
    border-style: groove;
}

#image {
    display: block;
}
#div1 {
    transition: opacity 1s;
    background-color: red;
    opacity: 0;
    position: relative;
    top: -20px;
    width: 100px;
}
#div1:hover {
    opacity: 1;
}
#div2 {
    background-color: blue;
}

Answer 1

代替 top，为 #div1 使用 margin-top:

#div1 {
   transition: opacity 1s;
   background-color: red;
   opacity: 0;
   position: relative;
   margin-top: -20px;
   width: 100px;
}