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，margin-top使用#div1：

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