<div>s 浮动/覆盖在 css 中的其他元素之上

Question

这个问题是指我在这个地址的网页：http : //www.acehscmaths.com/welcome/testhome

当您单击“图表”菜单选项（在顶部右侧的徽标旁边）时，它会下拉更多菜单选项，然后将整个页面向下推。有没有人可以将 CSS 设置应用于这些下拉元素，以便它们覆盖在现有内容之上（以免将整个页面向下推）。

我不确定我应该复制哪些代码，所以我刚刚复制了有问题的特定菜单：

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="charts.html" class="is-dropdown-menu">
                    <span class="badge pull-right"></span>
                    <i class="icon-bar-chart"></i> Charts
                </a>
                <ul>
                    <li>
                        <a href="charts.html#area_chart_anchor">
                            <i class="icon-random"></i>
                            Area Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#circle_chart_anchor">
                            <i class="icon-bullseye"></i>
                            Circular Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#bar_chart_anchor">
                            <i class="icon-signal"></i>
                            Bar Chart
                        </a>
                    </li>
                    <li>
                        <a href="charts.html#line_chart_anchor">
                            <i class="icon-bar-chart"></i>
                            Line Chart
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>
</div>

<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newquestion">
                    <i class="icon-question"></i> Question
                </a>
            </li>
        </ul>

    </div>
</div>


<div class="col-md-3">
    <div class="side-bar-wrapper collapse navbar-collapse navbar-ex1-collapse">

        <ul class="side-menu">
            <li>
                <a href="newnotes">
                    <i class="icon-book"></i> Study Notes
                </a>
            </li>
        </ul>

    </div>
</div>

非常感谢。

Answer 1

在您的 css 中添加以下调整应该可以解决问题并保持页面的流畅布局。

.side-menu {
   position:relative;
}
.side-menu li ul {
  position:absolute;
  z-index:99;
  width:100%;
}

它可能需要一些调整，但应该对问题进行排序。