如何将p-groll元素放置在屏幕右下角?

我希望咆哮消息被固定在右下角,我一直试图通过覆盖p-groll的CSS类来实现这一点。我的第一次尝试是重写 .ui咆哮 类,就像这样:

:ng deep.ui咆哮{
位置:固定;
底部:0;
右:0;
边框:3倍纯色73AD21;
}
(边界仅用于测试。)
这就产生了这样的效果,即生长容器本身会从顶部一直延伸到底部,在那里它会贴到右下方。消息咆哮容器中的实际消息咆哮仍然显示在容器顶部。我的第二次尝试是将css规则应用于message元素本身的css类.ui growl item。

这确实会使实际咆哮保持在右下角,但它也有一个不幸的效果,即在默认的。ui groll item,将咆哮从绿色/红色转为实际不可见。




我用粉色箭头指示了CSS类重写后的咆哮。你能看到的只是一些白色的字母和错误交叉符号的一部分。绿色块不是咆哮的一部分,而是背景的一部分。


有人知道我如何在咆哮中实现所需的CSS规则,同时维护我不想更改的其他CSS规则吗?我想我在这里找到了默认文件https://searchcode.com/codesearch/view/2686100/但是我不知道为了防止它失去颜色,我应该包括哪些默认CSS规则。使事情复杂化的是,颜色是有条件的,出错时变成红色,成功时变成绿色等等。


编辑:

我尝试使用top和left来实现相同的功能,但这不是一个可行的选项,因为当消息内容很大时,它可能会从视区中消失。另一方面,小消息不会粘到底。.ui-growl类如这样:


::ng-deep .ui-growl {   
    position: fixed;
    bottom: 0;
    right: 0;
    border: 3px solid #73AD21;
}


(边界仅用于测试。)
这就产生了这样的效果,即生长容器本身会从顶部一直延伸到底部,在那里它会贴到右下方。消息咆哮容器中的实际消息咆哮仍然显示在容器顶部。我的第二次尝试是将css规则应用于message元素本身的css类。.ui-growl-item.

这确实使实际的咆哮坚持在右下角,但它也有一个不幸的效果,似乎删除了默认的所有其他CSS样式的规则。.ui咆哮项把咆哮声从绿色/红色变成几乎看不见的。



我用粉色箭头指示了CSS类重写后的咆哮。你能看到的只是一些白色的字母和错误交叉符号的一部分。绿色块不是咆哮的一部分,而是背景的一部分。

有人知道我如何在咆哮中实现所需的CSS规则,同时维护我不想更改的其他CSS规则吗?我想我在这里找到了默认文件https://searchcode.com/codesearch/view/2686100/但我不知道应该包括什么默认的CSS规则来防止它失去颜色。使事情复杂化的是,颜色是有条件的,出错时变红,成功时变绿等等。

编辑:

我试过用top和left相反,要实现相同的目标,但这不是一个可行的选项,因为当消息内容占很大一部分时,它可能会从视区中消失。另一方面,小信息不会粘到底。