我正在尝试通过.ui-growl 类更改primefaces 的p:growl 位置以使用position: sticky。但是，由于组件在body 的末尾呈现，因此该位置的relative 行为无法按我的意愿工作。
有没有办法为这个组件使用sticky 位置？
或者某种方式让组件在声明的地方渲染？
PrimeFaces 5.1； 莫哈拉 2.1;
【问题讨论】：
position: sticky 属性的行为。
标签： jsf primefaces
Disclamer：我在 PF 7.0 展示中尝试过此操作，但我认为基本功能也适用于 5.1 版本。
您实际上有 4 个选项。后三个都需要你检查javascript source of the component（它是开放的，所以你可以在提问之前ALWAYS检查它，java source 在这里无关紧要）和对于第一个解决方案，它有助于了解组件是如何工作的，但是使用浏览器开发工具进行检查就足够了（我就是这样做的）。
这是您的变体“或者以某种方式让组件在声明的位置呈现？”。由于在客户端，都是纯 html、css 和 javascript，因此您可以使用客户端可用的所有工具进行操作。
您可以看到，增长的主要部分 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 of the component 创建客户端 dom 事物，其中是您在正文结束之前看到的容器（来自展示）
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
最后一部分是 html，是在需要渲染单个咆哮时添加到其中的部分，因此在大多数正常情况下使组件正常运行但在您的情况下需要以不同方式完成的部分。
实际上，这就像在 dom 中移动这段 html 一样简单，请参阅 How to move an element into another element?。
在在线展示中，我将以下 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），但您也可以根据类或其他使用不同的选择器）
在javascript source 中，您可以看到容器在技术上的渲染位置
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”？）也会使其工作。关于覆盖，您有两种选择
实际上你做了 #2 的第一部分，但修补源并创建一个新的自定义 PrimeFaces 版本
这里可以做的是在组件上创建一个新属性并在某些地方修补源，以便可以配置为让组件像现在一样或粘性（他们将现有的“粘性”属性更改为7.0.x 中的“keepAlive”如此粘滞再次可用；-))。当然这应该作为一个补丁提交然后......
【讨论】：
p:messages 对样式类进行一些更改（也是因为在 5.1 版中，growl 没有提供用于消息严重性的样式类）。当然我更喜欢解决方案 4，但我认为目前我会选择选项 1。;)