Question

我在JSF页面中有一个div层：

<p:outputPanel id="outputComponent">
    <div style="position: absolute; background-color: black; left: 350px; top: 0px; width: 700px; padding: 10px; border-radius: 6px;">

        <div class="container">
            Component Profile
        </div>
        <br/>
        <!-- <h:outputText value="#{TreeViewController.initComponent()}" /> -->

        <table>
            <col width="280"/><col width="130"/>

            <ui:repeat var="ud" value="#{TreeViewController.componentData}">

                <tr>
                    <td>Component ID</td>
                    <td>
                        <h:outputText value="#{ud.componentStatsID}"/>
                    </td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>
                        <h:outputText value="#{ud.componentName}"/>
                    </td>
                </tr>

            </ui:repeat>
        </table>

    </div>
</p:outputPanel>

我很感兴趣即使滚动页面，我仍然可以在显示屏的中心显示这个div？

Answer 1

您应该使用position属性值fixed。我不确定你是想让它在垂直和水平方向都居中，但这个解决方案适用于两者。根据div的高度，将宽度更改为您喜欢的宽度和top: 50%。

<强> CSS

.static {
  position: fixed;
  background-color: #000;
  width: 50%;
  top: 50%;
  left: 25%;
  right: 25%;
  padding: 10px;
  border-radius: 6px 6px 6px 6px;
  color: #fff;
}

在div上应用静态类并删除：style="position: absolute; background-color: black; left: 350px; top: 0px; width: 700px; padding: 10px; border-radius: 6px;"

Jsfiddle：http://jsfiddle.net/HwHUS/1/

如何在滚动JSF页面时始终显示div

1 个答案: