在左下角位置放置气球提示以通知文件下载

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;
}

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

Answer 2

为此尝试使用 margin-bottom：

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

在左下角位置放置气球提示以通知文件下载

Placing a balloon tip at bottom left position to notify about a file download

css

css-position