在固定标题下方显示内容

Question

我的页面有一个固定的标题，我知道这会导致内容流从页面顶部开始。我一直在寻找解决方法，但似乎没有任何效果，例如this one

下面是代码，这里是codepen - 你可以看到我的article 中的内容显示在页面顶部，尽管它位于我的html 底部。

我希望有一个解释的解决方法，以便我可以学习。

更新 - 添加padding-top:{500px} 成功解决了这个问题。这是推荐的解决方法吗？我被告知此修复程序here。

谢谢大家！

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

.header {
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {
  background: url("");
  height: 100vh;
  width: 100%;
  background-size: cover;
  position: absolute;
  z-index: -1000;
}

#intro {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>

            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
              </li>
              <!--
          -->
          </ul>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>

Answer 1

您已经有一个 100 像素的标题和一个 margin-top 应用于 site-content 以用于其后面的内容，就像通常所做的那样。

1. position: fixed 标头将从流中取出。所以它后面的DOM元素会重叠。

2. z-index 比周围的内容更高，因此它位于顶部（你已经完成了给 wrapper 一个 z-index: 99）

3. 它后面的内容被赋予margin-top 值。如果标题的height 是固定的（就像这里的情况一样），您可以使用CSS 给它，如果标题的高度是动态的，您可能必须选择javascript 来动态设置height。

因此，使用height: 100% 限制#global-navigation 和.header 的高度，并将display: flex 添加到导航ul。同时删除 banner 的 绝对定位 并将背景图片应用到 site-content- 参见下面的演示：

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
}

.col-1 {
  width: 100%;
}

.inline-block-container>* {
  display: -moz-inline-stack;
  display: inline-block;
}

ul,
ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.wrapper {
  position: fixed;
  height: 100px;
  width: 100%;
  top: 0;
  z-index: 99;
}

#global-navigation { /* ADDED */
  height: 100%;
}

.header {
  height: 100%; /* ADDED */
  width: 100%;
  top: 0;
  border-bottom: 1px solid #ddd;
  background-color: white;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.header .logo a img {
  width: 150px;
  height: 49px;
}

.site-content { /* ADDED */
  background: url("http://placehold.it/50x50");
  height: 100vh;
  width: 100%;
  background-size: cover;
}

.logo {
  margin-left: 40px;
}

.menu li {
  padding-right: 50px;
  margin-right: 20px;
}

.header .menu ul {
  display: flex; /* ADDED */
  margin: 0;
  padding: 0;
}

.header .menu ul li {
  display: inline-block;
  list-style: none;
}

.header .menu ul li a {
  text-decoration: none;
  display: block;
  padding: 30px 20px;
}

.site-content {
  margin-top: 100px;
}

.banner-home {} /* removed absolute positioning */

#intro { /* removed absolute positioning */
  width: 100%;
  text-align: center;
  color: #020000;
  z-index: 50;
}

#intro a {
  border: 3px solid #020000;
  cursor: pointer;
}

#intro li a {
  padding: 20px;
  color: #020000;
  font-weight: 800;
}

#intro li a:hover {
  background-color: #ffd800;
}

<div id="page" class="rare-site">
  <div class="wrapper">
    <div id="global-navigation">
      <!-- Global Header -->
      <header class="header">
        <div class="logo">
          <a href="">
            <!--<img src="images/rare-logo.png">-->
            <h1>Rare Select</h1>
          </a>
        </div>
        <nav class="menu">
          <ul>
            <li><a href="">HOME</a></li>
            <!-- 
          -->
            <li>
              <div class="flexbox-container">
                <a href="">INFO</a>
              </div>
            </li>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">NEWSLETTER</a>
              </div>
              <!--
          -->
              <li>
                <div class="flexbox-container">
                  <a href="">CONTACT</a>
                </div>
              </li>
              <!--
          -->
          </ul>
          </nav>
      </header>
      </div>
      </div>
      <div id="content" class="site-content">
        <div id="primary" class="content-area">
          <!-- Content Area -->
          <main id="main" class="site-main" role="main">
            <div class="banner large-trunk">
              <div class="banner-home"></div>
              <div class="banner-overlay">
                <div id="intro">
                  <h2 class="discover"><u>The easy way to discover models.</u></h2>
                  <div id="button-container">
                    <div id="button-overlay">
                      <ul class="inline-block-container">
                        <li><a class="discover-1">I'm looking to become a model</a></li>
                        <li><a class="discover-2">I'm looking for a model</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <article id="newsletter">
              <div class="newsletter-entry">
                <section class="news-content trunk">
                  <div class="feature-box">
                    <h2>Recent News</h2>
                  </div>
                </section>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>