JSF页面右上角按钮被accordionPanel遮挡的解决方法

问题根因 #

你使用float: right控制按钮右对齐时，浮动元素会脱离正常文档流，下方的p:accordionPanel作为常规流块级元素会向上占用浮动元素的位置，最终导致按钮被遮挡。

解决方法 #

推荐用更稳妥的flex布局替换float实现右对齐，同时调整按钮位置保证JSF动作可正常触发，修改后的代码如下：

<p:panel id="previewPanel" styleClass="col-12">
    <h:form id="preview" rendered="#{Upload.fileUpload}">
        <!-- 按钮放在form内部最上方，用flex实现右对齐 -->
        <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
            <h:commandButton name="saveFile" value="save"
                styleClass="GreenButton"
                actionListener="#{Upload.save()}"
                onclick="saveFunction()"
                style="width:90px;height:40px">
            </h:commandButton>
        </div>
        <p:accordionPanel widgetVar="basic">
            <p:tab title="Data Table">
                <p class="p-m-0">
                    <p:dataTable id="datas" var="data"
                        value="#{Upload.DataRead}"
                        styleClass="ui-datatable-striped ui-datatable-sm"
                        tableStyle="width: auto; max-width:100%; white-space:nowrap"
                        rowKey="#{zre.number}" paginator="true"
                        paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                        paginatorPosition="bottom"
                        rowClasses="tableRowOdd,tableRowEven" rows="12" cellpadding="3">
                        <p:column headerText="Nummer">
                            <h:outputText value="#{zre.Number}" />
                        </p:column>
                    </p:dataTable>
                </p>
            </p:tab>
        </p:accordionPanel>
    </h:form>
</p:panel>

补充说明 #

1. 原代码中按钮放在h:form外部，JSF的h:commandButton必须包裹在表单内才能正常触发后端actionListener逻辑，因此调整中将按钮移到了form内部最上方。
2. 如果你坚持要使用float实现对齐，只需要在按钮和accordionPanel之间添加清除浮动的标签即可：

<h:commandButton name="saveFile" value="save"
    styleClass="GreenButton"
    actionListener="#{Upload.save()}"
    onclick="saveFunction()"
    style="float:right;width:90px;height:40px">
</h:commandButton>
<!-- 添加清除浮动标签，避免下方元素上浮遮挡按钮 -->
<div style="clear: both;"></div>
<p:accordionPanel widgetVar="basic">

内容的提问来源于stack exchange，提问作者Jack