我正在尝试通过.ui-growl类更改PrimeFaces的p:growl位置以使用position: sticky。但是，由于该组件在body的末尾呈现，因此该位置的relative行为无法正常工作。
有什么方法可以使用sticky位置为此组件？或某种方法使组件呈现在声明的地方？
PrimeFaces 5.1;Mojarra 2.1;
Disclamer：我尝试了PF 7.0展示柜，但我认为基础知识也可与5.1版本一起使用。
您有效地有4个选项。后三个都需要您检查组件的JavaScript源(这是打开的，因此您可以始终在提出问题之前对其进行检查，Java源在这里无关紧要(对于第一个解决方案，它有助于查看组件的工作原理，但是使用浏览器开发人员工具进行检查就足够了(这就是我这样做的方式(。
基本分析，无论有或不查看源
这是您'的一个变体，或者是使组件呈现在声明的地方的某种方法？＆quort'。由于在客户端，都是普通的HTML，CSS和JavaScript，因此您可以使用客户端可用的Al工具来操纵。
您可以看到，生长的主要部分是 html从技术上渲染的地方。检查PrimeFaces展示柜，您会看到
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
就在XHTML中的形式内。组件的JavaScript创建了客户端的事物，其中是您在身体末端(来自展示柜(之前看到的容器
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
最后一块是html是在需要渲染时添加单个咆哮的地方，因此使组件在大多数正常情况下的表现正确，但在您的情况下需要有所不同。
> 。解决方案1，纯客户端组件不可知论
有效地，这就像在DOM中移动此HTML一样简单，请参阅如何将元素移动到另一个元素？
在在线展示柜中，我将以下jQuery代码放在浏览器开发人员工具控制台
中$("#j_idt700\:growl_container").prependTo(".layout-content");
并添加以下CSS
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
它有效。
应将jQuery放在您的页面中的某个地方，该页面在执行组件JavaScript之后运行，因此最好是在身体末端之前进行操作。请记住，j_idt700前缀是展示柜中表单的动态ID(此处没有固定ID(，但是您也可以根据类别或其他方式使用不同的选择器(
解决方案2，更改源'本地'
在JavaScript源中，您可以看到容器在技术上渲染的位置
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
以某种方式更改this.jq.appendTo($(document.body));以将其附加到当前的HTML节点('this'？(也将使它也可以正常工作。关于覆盖，您有两个选项
- 我如何在基于widgetvar的PrimeFaces组件中找到和/或覆盖JavaScript？
- 从PrimeFaces特定的小部件覆盖一种方法
解决方案3更改源服务器端
有效地完成＃2的第一部分，但要修补源并创建一个新的自定义PrimeFaces版本
解决方案4使此功能也适用于其他功能
在这里可以做的是在组件上创建一个新属性并在某些地方修补源，因此可以将组件以现在或粘性而表现为可配置(他们将现有的"粘性"属性更改为7.0.x中的" keepalive"再次可粘粘合；-)(。当然，应该将其作为补丁提交...