基础网格系统：我做错了什么？

Question

我正在使用 Foundation 5-Framework。我想创建一个带有面板的导航。当我添加面板时，导航栏总是在面板顶部。

这是我的代码：

<div id="content">
        <div class="row">
            <div class="contain-to grid fixed">
                <nav class="top-bar" data-topbar role="navigation">
                    <ul class="title-area">
                        <li class="name">
                            <h1><a href="#">MySite</a></h1>
                        </li>
                        <li class="toggle-topbar menu-icon">
                            <a href="#"><span></span></a>
                        </li>
                    </ul>
                    <section class="top-bar-section">
                        <ul class="right">
                            <li class="active">
                                <a href="home.ctp">Index</a>
                            </li>
                            <li>
                                <a href="#">Contact</a>
                            </li>
                            <li>
                                <a href="#">About me</a>
                            </li>
                            <li class="has-dropdown">
                                <a href="#">Sign up</a>
                                <ul class="dropdown">
                                    <li>
                                        <a href="#">Log in</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </section>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="small-12 columns panel">
                <p>This is a panel.</p>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以从第三行中删除“固定”类（如果您不需要固定位置的顶栏）， 如果您希望保持顶栏固定，则将 margin-top 添加到第二（面板）行（与顶栏高度相同）。

当一个元素是位置固定的（如绝对和浮动）时，它实际上并不在页面上，因为静态元素与它无关。所以你的面板锚定在页面的顶部，因为它上面没有块。 我正在简化一点，但我希望这会有所帮助。