展开可折叠时向下滑动内容答案

【问题标题】：Slide content down when expanding collapsible展开可折叠时向下滑动内容
【发布时间】：2014-04-02 01:34:38
【问题描述】：

我有一个可动态填充的可折叠文件。当我展开折叠时，它与我的浮动图表重叠。

有没有办法在折叠式展开时向下滑动图表 div？同样当它再次折叠时（向上滑动）？

这是我目前的设置：

<div id="main" data-role="page">
        <div id="header" data-role="header">
            <h1>Real Time Monitoring</h1>
        </div>

        <div id="parameters" data-role="collapsible" style="position: relative;width: auto; height: 100px;">
            <h3>Parameters</h3>
                <div id="divSensors" class="ui-grid-a">
                    <!-- dynamically generate checkboxes based on available sensors (c#) -->
                </div>
        </div>

        <!-- Div for flot graph -->
        <div id="chart-container" style="position: relative;">
            <!-- <label>LX Accel(g)</label> -->
            <div id="placeholder" style="width: 500px; height: 200px;"></div>
            <label">Time</label>
        </div>


        <!-- Footer -->
        <div id="footer" data-role="footer" data-position="fixed">
            <h3>&copy;&nbsp;Test Test</h3>
        </div>

    </div>

【问题讨论】：

这可能是 CSS 问题。这些元素的position 和z-index 属性是什么？
所有的 CSS 都在里面。我还没有外部文件。我想让它首先工作，然后将所有 css 转移到一个外部文件，所以你在这里看到的所有东西都有 css。我似乎找不到 z-index。我查看了样式控制台，但没有显示。这里应用的样式没有任何意义，因为我只是在测试是否可以让它工作。

标签： jquery css html jquery-mobile collapsable

【解决方案1】：

只需从可折叠和图表容器中删除position: relative，并从图表容器中删除height: 100px;。

【讨论】：

谢谢您，先生。您介意对它的工作原理做一个简短的解释吗？ Css 从来都不是我的强项
看看这里：w3schools.com/cssref/pr_class_position.asp。默认情况下，位置是静态的，这意味着对象按顺序渲染，因此一个接一个地流动。当你将它设置为相对时，你就打破了这个流程。