0

我在 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？

4

1 回答 1

2

您应该使用position属性值fixed。我不确定您是否希望它垂直和水平居中，但此解决方案适用于两者。将宽度更改为您喜欢的任何内容，top: 50%具体取决于您的 div 的高度。

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/

于 2013-02-11T19:26:50.250 回答