div悬停在它上面时消失

Question

我想在图像上添加一个div，当用户将鼠标放在div上时，div会显示，但当我将鼠标移到div上时，它会显示一秒然后消失。
HTML代码：

<img src="image.png" id="image" />
<div id="div1">div1
<div id="div2">div2</div>
</div>

css代码：

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

问题解决了： 将margin-top替换为position: relative