0

我的页面中有一个accordionPanel和时间表。但是当我扩展我的时accordionPanel，我的日程安排会下降。为什么？我使用素面。

我添加了一个屏幕：http: //zapodaj.net/2a318f4131f84.jpg.html

我在 CSS 中为该区域着色以显示这些区域不相互重叠。

月份名称和星期天和月份之间的切换不动。只有日历向下移动。为什么？

<div id="panelMenu">
    <h:form>
        <p:accordionPanel activeIndex="false">
            <p:tab title="#{msg.manage}">
                <p:menu styleClass="selection">
                    <p:menuitem action="#{userMB.patientList()}" value="Pacjenci" icon="ui-icon-triangle-1-e"/>
                    <p:menuitem action="#{userMB.doctorList()}" value="Lekarze" icon="ui-icon-triangle-1-e"/>
                    <p:menuitem action="#{userMB.inactiveAccountList()}" value="Nieaktywne" icon="ui-icon-triangle-1-e"/>
                </p:menu>
            </p:tab>
            <p:tab title="#{msg.myAccount}">
                <p:menu styleClass="selection">
                    <p:menuitem value="#{msg.edit}" action="#{userMB.editMyAccount()}" icon="ui-icon-pencil"/>
                    <p:menuitem value="#{msg.logout}" action="#{loginMB.logout()}" icon="ui-icon-power"/>
                </p:menu>
            </p:tab>
        </p:accordionPanel>
    </h:form>
</div>

    <div id="visitsRegisterSecretary">
        <h:form id="form">
            <p:growl id="messages"/>  
            <p:schedule id="schedule" value="#{visitSecretaryMB.eventModel}" widgetVar="myschedule" locale="pl" timeZone="GMT+2" >  
                <p:ajax event="dateSelect" listener="#{visitSecretaryMB.onDateSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                <p:ajax event="eventSelect" listener="#{visitSecretaryMB.onEventSelect}" update="eventDetails" oncomplete="eventDialog.show()" />  
                <p:ajax event="eventMove" listener="#{visitSecretaryMB.onEventMove}" update="messages" />  
                <p:ajax event="eventResize" listener="#{visitSecretaryMB.onEventResize}" update="messages" />  
            </p:schedule>

CSS：panelMenu 到手风琴面板

#panelMenu {
    float: right;
    height: auto;
    width: 180px;
}

按计划访问

#visits {
    padding-top: 200px;
    width: 700px;
    padding-bottom: 60px;
}

同时在：

 #all {
    width: 901px;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
4

1 回答 1

1

浮动元素仍然是网页正常流程的一部分。因此，当你展开 panelMenu并且高度与 的父框重叠时<p:schedule>，会影响 的位置<p:schedule>并导致其移动。即使您没有看到重叠，也会发生重叠。因此，您可以做的一件事是panelMenu通过使用absolute定位（在relative定位框内）取消页面的正常流程。

注意：提供的 xhtml 上id的值没有。visits因此，我将假设给定的规则实际上是 fordiv id="visitsRegisterSecretary"并且我已在 CSS中更改#visits为。#visitsRegisterSecretary

您所要做的就是将您的包装accordionPanel在下面的两个 div 中

<div id="panelMenuContainer">
    <div id="panelMenu">
        <h:form>
             <p:accordionPanel activeIndex="false">
                 <p:tab title="#{msg.manage}">
             <!--Remainder ommitted -->
             </p:accordionPanel>
        </h:form>
    </div>
</div>

然后在样式表中定义以下规则

#panelMenuContainer {
    position:relative; 
}

#panelMenu {
    position: absolute; 
    left: 880px;
    width: 180px;
}

该left属性将导致panelMenu相应移动。

附加说明：

  1. 我只是在猜测 in 的值，left所以#panelMenu根据需要进行更改。
  2. 此外，如果您希望两者都正确对齐（假设这是您所追求的），您可以删除padding-top规则 。#visitsRegisterSecretary<h:forms>

您可以参考这些链接以获得更深入的解释

关于花车

相对定位里面的绝对定位

于 2013-07-15T16:43:43.753 回答