调整 PNotify 通知的初始位置答案

【问题标题】：Adjusting initial position of PNotify notification调整 PNotify 通知的初始位置
【发布时间】：2015-10-30 05:47:27
【问题描述】：

我正在尝试调整我的 PNotify 通知的初始位置。正如您在图像中看到的，通知阻止了我的搜索栏。我想将通知的初始位置降低大约 50 像素，这样它就不会阻塞搜索栏。

我已经在谷歌上搜索这个问题很长时间了，但没有结果：

我试过了：

通过添加margin-top: 50px更改通知的CSS
docs下有自定义类来改变初始位置，但都是自定义类，如stack_bar_top或stack_bar_bottom。我想自己调整这些值。
这个答案在Github 页面上，但我被抛出了no such class as pnotify.css 错误

这是我目前的 PNotify 代码：

    function notification(text, type) {
        new PNotify({
            text: text,
            type: type,
            animation: 'slide',
            delay: 3000,
            top:"500px",
            min_height: "16px",
            animate_speed: 400,
            text_escape: true,
            nonblock: {
                nonblock: true,
                nonblock_opacity: .1
            },
            buttons: {
                show_on_nonblock: true
            },
            before_open: function(PNotify){
                PNotify.css({
                    "top":"50px"
                });
            }
        });
    }

我查看了 CSS，似乎 ui-pnotify 负责定位。默认为top: 25px。

我在我的 CSS 中创建了一个新类并命名它：

.ui-pnotify {
  top: 50px;
}

但似乎没有用。

【问题讨论】：

在浏览器控制台中检查应用于元素本身的 css。查看实际适用于它的规则（可以查看任何特定元素的所有规则）并进行相应调整。假设所有内联样式都是脚本生成的，其他的应该在 css 文件中
我尝试了所有这些以及更多 =/ Github 问题线程中发布的解决方案已过时，并且在新版本的 PNotify 中不再有效。

标签： jquery css pnotify

【解决方案1】：

下载pnotify的last version，修改css文件中选择器.ui-pnotify的样式（我用的是pnotify.custom.min.css），代码如下：

.ui-pnotify {
      top: 50px;/*Replace the 25px with the top that you need*/
      right:25px;
      position:absolute;
      height:auto;
      z-index:9999
    }

【讨论】：

如果您有多个通知，则使用此解决方案将它们放在一起。

【解决方案2】：

在您的配置中，设置firstpos1 变量。

因此，当您定义堆栈时，它可能如下所示：

const defaultStack = {
    dir1: 'down',
    dir2: 'left',
    firstpos1: 50, // This is the initial position of the first popup relative to dir1
    firstpos2: 20,
    spacing1: 10,
    spacing2: 10,
    push: 'top',
    overlayClose: true,
    modal: false,
    context: document.body
};

来源：PNotify GitHub page

【讨论】：

谢谢，但这已经是五年前的事了！哈哈。