Css 如何在屏幕右下角定位p-growl元素？_Css_Angular_Angular5_Primeng

Css 如何在屏幕右下角定位p-growl元素？

css angular

Css 如何在屏幕右下角定位p-growl元素？,css,angular,angular5,primeng,Css,Angular,Angular5,Primeng,我希望将咆哮消息固定在右下角，我一直试图通过覆盖p-growl的css类来实现这一点。我的第一次尝试是重写.ui咆哮类，如下所示： ::ng-deep .ui-growl { position: fixed; bottom: 0; right: 0; border: 3px solid #73AD21; } （边界仅用于测试。）这会导致容器本身从顶部一直拉长到底部，并附着在右下角。消息咆哮容器中的实际消息咆哮仍显示在容器顶部。我的第二次尝试是将css规则

我希望将咆哮消息固定在右下角，我一直试图通过覆盖p-growl的css类来实现这一点。我的第一次尝试是重写

.ui咆哮

类，如下所示：

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

（边界仅用于测试。）这会导致容器本身从顶部一直拉长到底部，并附着在右下角。消息咆哮容器中的实际消息咆哮仍显示在容器顶部。我的第二次尝试是将css规则应用于message元素本身的css类

。ui咆哮项

这确实会使实际的咆哮停留在右下角，但它也有一个不幸的效果，似乎删除了默认

.ui咆哮项

中的所有其他css样式规则，将咆哮从绿色/红色变为几乎不可见

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

有人知道我如何在咆哮中实现所需的css规则，同时维护我不想更改的其他css规则吗？我想我已经在这里找到了默认文件，但我不知道应该包括哪些默认css规则来防止它失去颜色。使事情复杂化的是，颜色是有条件的，当它出错时会变成红色，绿色代表成功等等

编辑：

我尝试使用

top

和

left

来实现同样的效果，但这不是一个可行的选择，因为当消息内容很大一部分时，它可能会从视口中消失。另一方面，小消息不会粘在底部。

简单，只需更改

.ui growl

类的

top

属性即可

默认情况下，该类如下所示

.ui-growl {
    top: 100px;
}

把它改成。或者添加新样式

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

调整顶部，以适合您的位置。这里的

vh

是视口高度，以总视口的百分比表示

更新：使用此样式替代

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

希望这有帮助。：）