如何在屏幕的右下方放置一个p-growl元素？

Question

我希望将咆哮消息固定在右下角，而我一直试图通过覆盖p-growl的CSS类来做到这一点。我的第一次尝试是像这样覆盖.ui-growl类：

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

（边界仅用于测试。） 这样的结果是，groightcontainer本身将从顶部一直延伸到底部，并一直粘附到右下角。消息咆哮容器内的实际消息咆哮仍显示在容器顶部。我的第二次尝试是将CSS规则应用于消息元素本身.ui-growl-item的CSS类。

这的确使实际的咆哮声保持在右下角，但它的不幸效果是似乎擦除了默认.ui-growl-item中的所有其他css样式规则，使咆哮声从绿色/红色变为几乎不可见。

我用粉红色箭头指示了css类覆盖后的咆哮声。您所看到的只是一些白色字母和错误十字符号的一部分。绿色块不是咆哮的一部分，而是背景的一部分。

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

编辑：

我曾尝试使用top和left来达到相同的目的，但这不是一个可行的选择，因为当消息内容很大时，它的一部分可能会从视口中消失。另一方面，小消息不会停留在底部。

Answer 1

简单，只需更改top类的.ui-growl属性。

默认情况下，该类看起来像

.ui-growl {
    top: 100px;
}

将其更改为。或添加新样式。

.ui-growl {
    top: 80vh !important;
}

调整顶部以适合您的位置。 vh是视口高度，以总视口的百分比表示。

更新：使用此样式覆盖

.ui-growl {
    top: auto;
    bottom: 0px;
}

希望这会有所帮助。 ：）