Navigation 地基6粘性Navo覆盖 我在基础6中创建粘性的Nav.我不希望它做的事情是覆盖底层内容，这样在页面加载时，下面部分的背景图像实际上可以在导航下方看到，而不仅仅是在滚动页面上

CodePen:

站点标题














搜寻


我们；重新点燃你想要尝试的基础！
要开始，这个文件（index.html）包含一些基本样式，您可以修改、使用或完全销毁这些样式

一旦您在本文档中玩得精疲力竭，您应该查看：



关于使用该框架，您需要了解的所有信息


BR/>这些在线课程为您提供了一个更好地了解基金会工作的机会，以及如何掌握基金会来创建令人敬畏的项目。

加入基金会，提出问题或炫耀你的知识。



最新代码、问题报告、功能请求等



如果您有问题，请在推特上点击我们。当你用这个做东西的时候，我们很乐意看到它（并且给你发一张老板的贴纸）

此处；这是您的基本网格：
这是一行12列的部分。每个部分都包含一个div.callout元素，因此您可以看到列的位置-网格根本不需要它

六列

六列

四列

四列

四列


我们向您打赌；我需要一张表格：
输入标签
输入标签
输入标签
输入标签
网站
选择框
剥皮机
星巴克
热狗
阿波罗
选择你最喜欢的
第一台
第二台
看看这些
复选框1
复选框2
文本区域标签
请尝试以下按钮之一：








这么多组件，女孩！
一个完整的厨房洗涤槽是有基础的。查看文档以查看所有文档，以及关于将其设置为您自己的文档的详细信息

在任何情况下，我都试过在下面的部分中使用margintop:-40px，但它不可靠，而且不起作用。我也尝试过为siteNavStickyWrap制作数据页边距top=“.1”，但这也是个难题

是否有人找到了一个干净、稳定的方法来在基础6中有一个粘性的Navo，它能自动地将粘性的Navo覆盖在底层的页面内容上？p>

---

谢谢

您是否尝试重置顶杆容器的位置？现在它是相对的，这就是为什么照片在它后面，而不是在它下面。。。您是否尝试重置顶杆容器的位置？现在它是相对的，这就是为什么照片在它后面，而不是在它下面。。。

    <div id="page">
  <div class="top-bar-container" data-sticky-container>
    <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
      <div class="top-bar">
        <div class="row column">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">Site Title</li>
              <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu">
              <li>
                <input type="search" placeholder="Search">
              </li>
              <li>
                <button type="button" class="button">Search</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="hero large-12-columns">
    </div>

    <div class="large-12 columns">
      <div class="callout">
        <h3>We&rsquo;re stoked you want to try Foundation! </h3>
        <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
        <p>Once you've exhausted the fun in this document, you should check out:</p>
        <div class="row">
          <div class="large-4 medium-4 columns">
            <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a>
              <br />Everything you need to know about using the framework.</p>
          </div>
          <div class="large-4 medium-4 columns">
            <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a>
              <br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
          </div>
          <div class="large-4 medium-4 columns">
            <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a>
              <br />Join the Foundation community to ask a question or show off your knowlege.</p>
          </div>
        </div>
        <div class="row">
          <div class="large-4 medium-4 medium-push-2 columns">
            <p><a href="http://github.com/zurb/foundation">Foundation on Github</a>
              <br />Latest code, issue reports, feature requests and more.</p>
          </div>
          <div class="large-4 medium-4 medium-pull-2 columns">
            <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a>
              <br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="large-8 medium-8 columns">
      <h5>Here&rsquo;s your basic grid:</h5>
      <!-- Grid Example -->

      <div class="row">
        <div class="large-12 columns">
          <div class="primary callout">
            <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="large-6 medium-6 columns">
          <div class="primary callout">
            <p>Six columns</p>
          </div>
        </div>
        <div class="large-6 medium-6 columns">
          <div class="primary callout">
            <p>Six columns</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="large-4 medium-4 small-4 columns">
          <div class="primary callout">
            <p>Four columns</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 columns">
          <div class="primary callout">
            <p>Four columns</p>
          </div>
        </div>
        <div class="large-4 medium-4 small-4 columns">
          <div class="primary callout">
            <p>Four columns</p>
          </div>
        </div>
      </div>

      <hr />

      <h5>We bet you&rsquo;ll need a form somewhere:</h5>
      <form>
        <div class="row">
          <div class="large-12 columns">
            <label>Input Label</label>
            <input type="text" placeholder="large-12.columns" />
          </div>
        </div>
        <div class="row">
          <div class="large-4 medium-4 columns">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.columns" />
          </div>
          <div class="large-4 medium-4 columns">
            <label>Input Label</label>
            <input type="text" placeholder="large-4.columns" />
          </div>
          <div class="large-4 medium-4 columns">
            <div class="row collapse">
              <label>Input Label</label>
              <div class="input-group">
                <input type="text" placeholder="small-9.columns" class="input-group-field" />
                <span class="input-group-label">.com</span>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns">
            <label>Select Box</label>
            <select>
              <option value="husker">Husker</option>
              <option value="starbuck">Starbuck</option>
              <option value="hotdog">Hot Dog</option>
              <option value="apollo">Apollo</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="large-6 medium-6 columns">
            <label>Choose Your Favorite</label>
            <input type="radio" name="pokemon" value="Red" id="pokemonRed">
            <label for="pokemonRed">Radio 1</label>
            <input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
            <label for="pokemonBlue">Radio 2</label>
          </div>
          <div class="large-6 medium-6 columns">
            <label>Check these out</label>
            <input id="checkbox1" type="checkbox">
            <label for="checkbox1">Checkbox 1</label>
            <input id="checkbox2" type="checkbox">
            <label for="checkbox2">Checkbox 2</label>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns">
            <label>Textarea Label</label>
            <textarea placeholder="small-12.columns"></textarea>
          </div>
        </div>
      </form>
    </div>

    <div class="large-4 medium-4 columns">
      <h5>Try one of these buttons:</h5>
      <p><a href="#" class="button">Simple Button</a>
        <br/>
        <a href="#" class="success button">Success Btn</a>
        <br/>
        <a href="#" class="alert button">Alert Btn</a>
        <br/>
        <a href="#" class="secondary button">Secondary Btn</a></p>
      <div class="callout">
        <h5>So many components, girl!</h5>
        <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
        <a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
      </div>
    </div>
  </div>
</div>