AccordionPanel moves Schedule

Question

我有一個accordionPanel並在我的頁面上安排。但是當我擴大我的accordionPanel時，我的日程安排就會下降。爲什麼？我使用primefaces。

我添加了一個屏幕：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到accordionPanel

#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; 
} 

Answer 1

浮動元素保持網絡的正常流程的一部分頁。因此，當您展開 panelMenu且高度與<p:schedule>的父框重疊時，它將影響<p:schedule>的位置，並且會導致它移動。即使你沒有看到它，重疊也會發生。因此，您可以做的一件事情是通過使用absolute定位（位於relative定位框內），使panelMenu脫離正常頁面流程。

注意：沒有id與提供的xhtml上的值visits。因此，我將假定給出的規則實際上是div id="visitsRegisterSecretary"，並且我在CSS中將#visits更改爲#visitsRegisterSecretary。

所有你需要做的就是包裝下面

<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> 

您accordionPanel內的兩個div，然後在你的樣式表定義下列規則

#panelMenuContainer { 
    position:relative; 
} 

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

的left屬性將導致panelMenu相應地移動。

其他注意事項：

1. 我只是猜測的#panelMenuleft值，以便根據需要更改 。
2. 另外，如果你想既<h:forms>正確對齊 （假設這是你以後），您可以刪除 #visitsRegisterSecretary的padding-top規則。

您可以參考以下鏈接進行了較爲深入的解釋

All about floats

Absolute positioning inside relative positioning