将气球提示放置在左下角位置，以通知文件下载情况。

Question

我需要通知用户在从网页下载文件之后该做什么。

为了做到这一点，我放置了一个气球工具提示，我是这样设计的：

   #infoBalloon {
        width: 100px;
        height: 10px;
        position: fixed;
        left: 90px;
        bottom: 0px;
    }

问题是气球会出现，但当文件开始下载时，文件下载底部栏就会被放置在气球提示上，导致气球被部分隐藏。

​

​

当文件开始下载时，我试着在2秒后显示气球提示，但是它取决于网络速度，所以它不是一个准确的解决方案。

当文件下载栏已经显示时，气球提示将被完美地显示出来。

​

​

当文件下载栏出现时，我如何才能使气球提示向上移动？

谢谢詹姆

Answer 1

第一种方法:默认情况下增加底部值。

#infoBalloon {
  width: 100px;
  height: 10px;
  position: fixed;
  left: 90px;
  bottom: 30px;
}

第二种方法:在下载文件时有条件地应用一个类。然后将bottom值放在这个应用类上，这样它就不会重叠。

Answer 2

尝试使用margin-bottom：

   #infoBalloon {
        width: 100px;
        height: 10px;
        position: fixed;
        left: 90px;
        bottom: 30px;
        margin-bottom: 30%;
    }