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

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

您可以从第三行中删除"fixed"类（如果您不需要固定位置的顶栏），或者，如果您希望保持顶部栏固定，请将上边距添加到第二（面板）行（与顶栏高度相同）。

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