Java AccordionPanel移动明细表

我的页面中有一个

手风琴面板

和日程表。但是，当我展开我的

手风琴面板时，我的日程安排会向下移动。为什么？我用素面

我添加了一个屏幕：

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

按计划参观

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

浮动元素仍然是网页正常流程的一部分。因此，当您展开
面板菜单
且高度与
的父框重叠，这将影响
的位置并导致其移动。即使你看不到，重叠也会发生。因此，您可以做一件事来防止出现这种情况，那就是使用
绝对定位（在
相对定位框中）将
面板菜单
从页面的正常流程中移除

注意：在提供的xhtml上没有具有值为
访问
的
id
。因此，我将假设给出的规则实际上是针对CSS中的
div id=“visitsristerssecretary”
的，并且我已将
\visions
更改为
\visitsristerssecretary

您只需将
手风琴面板
包装在下面的两个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>

left
属性将导致
panelMenu
相应移动

附加注释：

我只是猜测
面板菜单中
left
的值
需要
此外，您还可以删除中的
padding top
规则
#如果希望两个
对齐，请访问注册表秘书处
正确（假设这就是你想要的）

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


请发布一些橙色代码。我编辑了第一篇文章。请看，您的xhtml没有编译。你能更新一下吗，因为它不完整<代码>找不到标识符为“eventDetails”的组件，该标识符引用自“form:schedule”。
我对我的答案做了一些假设，但我想我知道在使用代码之后您想说什么。以后，请注意你的帖子。没有规则
#访问
和
#全部
的id，您的xhtml无法编译。让我知道这是否有效，如果不更新您的代码，使其包括所有相关信息，我会再看一看。
<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;
}