页面部分没有分开

Question

我的网页有一个固定的全局标题，下面的所有内容都滚动到标题由z-index提供。

我已经使用hacky方法在标题margin-top下面提供内容以保持一切到位。但是我的2个主要部分存在问题。

我的标记中的第一部分显示为好像它已嵌套在它下面的第二部分中

例如，如果我给第二部分margin-top:400px，第一部分也将被拖下来。

这是代码（我添加了标题只是因为它的position:fixed可能导致布局问题。

或者，我做了一个codepen。

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


/* clear fix */

.c-f::after {
  content: "";
  display: table;
  clear: both;
}

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

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

img {
  max-width: 100%;
}

.center-text {
  text-align: center;
}

.large-trunk {
  width: 100%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
}

.mid-trunk {
  width: 95%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
}

.trunk {
  width: 85%;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}


/* Grid Units */

.col-1 {
  width: 100%;
}

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

#global-navigation {
  height: 100%;
  /* restrict height as we have fixed header out of the DOM */
}

#global-social {
  background-color: #c4c4c4;
  color: white;
}

#global-social ul li {
  text-align: center;
  display: inline-block;
}

#global-social ul li a {
  padding-left: 45px;
  margin-right: -60px;
}

.facebook {
  width: 20px;
  height: auto;
  padding-top: 5px;
}

.twitter {
  width: 20px;
  height: auto;
  padding-top: 5px;
}

.instagram {
  width: 20px;
  height: auto;
  padding-top: 5px;
}


/*  Header/Navigation  ----------*/

.header {
  width: 100%;
  height: 80%;
  /* restrict height as we have fixed header out of the DOM */
  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;
  color: #c9968b;
}

.header .menu ul li ul.submenu {
  overflow: hidden;
  display: none;
  position: absolute;
  width: 161px;
  margin-top: 1px;
}

.header .menu ul li ul.submenu li {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  background-color: #fff;
}

.header .menu ul li ul.submenu li a {
  line-height: 25px;
  padding: 10px 25px;
}

.header .menu ul li:hover ul.submenu {
  display: block;
}

.header .menu ul li i.icon-arrow {
  display: none;
}

.landing-main {
  margin-top: 180px;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  z-index: -1000;
  text-align: center;
}

.landing-main-column {
  float: left;
  display: block;
  margin-right: 2.3576515979%;
  width: 31.7615656014%;
}

.landing-main-content {
  width: 100%;
}

.landing-image {
  position: relative;
  overflow: hidden;
}

.landing-main img {}


/* SECTION 2  ------------------*/


/*recent-grid*/

#recent-news {
  width: 90%;
  margin-bottom: 50px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.recent-content {
  text-align: center;
}

.news-container {
  /* implement cross browser fallback */
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 1;
  width: 100%;
  margin-top: 50px;
}

.item {
  width: 100%;
  float: left;
  padding: 0.5em;
}

.item img {
  border: 1px solid #000;
}

<div class="wrapper">
  <!-- .Global-Header -->
  <div id="global-social" class="outer-header col-1">
    <div class="container">
      <nav>
        <ul class="social">
          <li>
            <a href="https://www.facebook.com/rareselectmodels/" target="_blank">
              <img class="facebook" alt="facebook" src="images/facebook-icon.jpg">
            </a>
          </li>
          <li>
            <a href="https://twitter.com/RareSelectModel" target="_blank">
              <img class="twitter" alt="twitter" src="images/twitter-icon.jpg">
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/RareSelectModels/" target="_blank">
              <img class="instagram" alt="instagram" src="images/instagram-icon.png">
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div id="global-navigation">
    <header class="header">
      <div class="logo">
        <a href="">
          <!--<img src="images/rare-logo.png">-->
          <h1>Rare Select Models</h1>
        </a>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="">HOME</a></li>
          <!-- 
          -->
          <li>
            <div class="flexbox-container">
              <a href="">INFO</a>
              <i class='icon-arrow'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
                  <path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
                                       c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
                                       c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
                </svg>
              </i>
            </div>
            <ul class="submenu">
              <li class="subOption"><a href="">About</a></li>
              <li class="subOption"><a href="">Our Girls</a></li>
              <li class="subOption"><a href="">Our Boys</a></li>
              <li class="subOption"><a href="">T's & C's</a></li>
            </ul>
          </li>
          <!--
          -->
          <li>
            <div class="flexbox-container">
              <a href="">NEWSLETTER</a>
            </div>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">CONTACT</a>
                <i class='icon-arrow'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
                  <path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
                                       c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
                                       c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
                </svg>
              </i>
              </div>
              <ul class="submenu">
                <li class="subOption"><a href="">Join Us</a></li>
              </ul>
            </li>
            <!--
          -->
        </ul>
      </nav>
    </header>
  </div>
</div>
<article id="content" class="site-content">
  <!-- .Content-Area -->
  <main id="main" class="site-main" role="main">
    <section class="landing-main">
      <div class="landing-main-column">
        <div class="landing-main-content">
          <div class="landing-image">
            <img src="http://i.telegraph.co.uk/multimedia/archive/03140/Thierry-Henry_3140334b.jpg">
          </div>
        </div>
      </div>
    </section>
    <section id="recent-news">
      <div class="recent-entry">
        <div class="recent-content trunk">
          <h2 class="center-text">Recent News</h2>
          <div class="news-container">
            <div class="item">
              <a href="#">
                <img src="http://i.dailymail.co.uk/i/pix/2016/04/15/00/00029C1D000001F4-3540423-Bergkamp_joined_Arsenal_in_1995_and_went_on_to_become_a_club_leg-a-19_1460675800545.jpg">
              </a>
              <p>Item Caption</p>
            </div>
            <div class="item">
              <a href="#">
                <img src="images/recent-news-2.jpg">
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

Answer 1

我不确定这是否是您正在寻找的，但是将overflow: auto;添加到具有类.landing-main的第一部分允许第二部分的边距推到第一部分之下。

查看完整的工作代码：

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


/* clear fix */

.c-f::after {
  content: "";
  display: table;
  clear: both;
}

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

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

img {
  max-width: 100%;
}

.center-text {
  text-align: center;
}

.large-trunk {
  width: 100%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
}

.mid-trunk {
  width: 95%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
}

.trunk {
  width: 85%;
  max-width: 1150px;
  margin-left: auto;
  margin-right: auto;
}


/* Grid Units */

.col-1 {
  width: 100%;
}

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

#global-navigation {
  height: 100%;
  /* restrict height as we have fixed header out of the DOM */
}

#global-social {
  background-color: #c4c4c4;
  color: white;
}

#global-social ul li {
  text-align: center;
  display: inline-block;
}

#global-social ul li a {
  padding-left: 45px;
  margin-right: -60px;
}

.facebook {
  width: 20px;
  height: auto;
  padding-top: 5px;
}

.twitter {
  width: 20px;
  height: auto;
  padding-top: 5px;
}

.instagram {
  width: 20px;
  height: auto;
  padding-top: 5px;
}


/*  Header/Navigation  ----------*/

.header {
  width: 100%;
  height: 80%;
  /* restrict height as we have fixed header out of the DOM */
  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;
  color: #c9968b;
}

.header .menu ul li ul.submenu {
  overflow: hidden;
  display: none;
  position: absolute;
  width: 161px;
  margin-top: 1px;
}

.header .menu ul li ul.submenu li {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  background-color: #fff;
}

.header .menu ul li ul.submenu li a {
  line-height: 25px;
  padding: 10px 25px;
}

.header .menu ul li:hover ul.submenu {
  display: block;
}

.header .menu ul li i.icon-arrow {
  display: none;
}

.landing-main {
  margin-top: 180px;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  z-index: -1000;
  text-align: center;
  overflow: auto;
}

.landing-main-column {
  float: left;
  display: block;
  margin-right: 2.3576515979%;
  width: 31.7615656014%;
}

.landing-main-content {
  width: 100%;
}

.landing-image {
  position: relative;
  overflow: hidden;
}

.landing-main img {}


/* SECTION 2  ------------------*/


/*recent-grid*/

#recent-news {
  width: 90%;
  margin-bottom: 50px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.recent-content {
  text-align: center;
}

.news-container {
  /* implement cross browser fallback */
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 1;
  width: 100%;
  margin-top: 50px;
}

.item {
  width: 100%;
  float: left;
  padding: 0.5em;
}

.item img {
  border: 1px solid #000;
}

<div class="wrapper">
  <!-- .Global-Header -->
  <div id="global-social" class="outer-header col-1">
    <div class="container">
      <nav>
        <ul class="social">
          <li>
            <a href="https://www.facebook.com/rareselectmodels/" target="_blank">
              <img class="facebook" alt="facebook" src="images/facebook-icon.jpg">
            </a>
          </li>
          <li>
            <a href="https://twitter.com/RareSelectModel" target="_blank">
              <img class="twitter" alt="twitter" src="images/twitter-icon.jpg">
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/RareSelectModels/" target="_blank">
              <img class="instagram" alt="instagram" src="images/instagram-icon.png">
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <div id="global-navigation">
    <header class="header">
      <div class="logo">
        <a href="">
          <!--<img src="images/rare-logo.png">-->
          <h1>Rare Select Models</h1>
        </a>
      </div>
      <nav class="menu">
        <ul>
          <li><a href="">HOME</a></li>
          <!-- 
          -->
          <li>
            <div class="flexbox-container">
              <a href="">INFO</a>
              <i class='icon-arrow'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
                  <path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
                                       c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
                                       c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
                </svg>
              </i>
            </div>
            <ul class="submenu">
              <li class="subOption"><a href="">About</a></li>
              <li class="subOption"><a href="">Our Girls</a></li>
              <li class="subOption"><a href="">Our Boys</a></li>
              <li class="subOption"><a href="">T's & C's</a></li>
            </ul>
          </li>
          <!--
          -->
          <li>
            <div class="flexbox-container">
              <a href="">NEWSLETTER</a>
            </div>
            <!--
          -->
            <li>
              <div class="flexbox-container">
                <a href="">CONTACT</a>
                <i class='icon-arrow'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="120.6 59.5 612 359.1">
                  <path fill="#fff" d="M715.7,163.2c-21.1,22.2-248,237.4-248,237.4c-11.6,11.6-26.3,18-41.2,18s-30.6-6.3-41.2-18
                                       c0,0-225.9-215.2-248-237.4c-21.1-22.2-23.2-61.2,0-85.5c23.2-23.2,54.8-25.3,83.3,0l205.8,198.5l206-198.4
                                       c28.5-25.3,60.1-23.2,83.3,0C738.8,102.1,737.8,141.1,715.7,163.2z"/>
                </svg>
              </i>
              </div>
              <ul class="submenu">
                <li class="subOption"><a href="">Join Us</a></li>
              </ul>
            </li>
            <!--
          -->
        </ul>
      </nav>
    </header>
  </div>
</div>
<article id="content" class="site-content">
  <!-- .Content-Area -->
  <main id="main" class="site-main" role="main">
    <section class="landing-main">
      <div class="landing-main-column">
        <div class="landing-main-content">
          <div class="landing-image">
            <img src="http://i.telegraph.co.uk/multimedia/archive/03140/Thierry-Henry_3140334b.jpg">
          </div>
        </div>
      </div>
    </section>
    <section id="recent-news">
      <div class="recent-entry">
        <div class="recent-content trunk">
          <h2 class="center-text">Recent News</h2>
          <div class="news-container">
            <div class="item">
              <a href="#">
                <img src="http://i.dailymail.co.uk/i/pix/2016/04/15/00/00029C1D000001F4-3540423-Bergkamp_joined_Arsenal_in_1995_and_went_on_to_become_a_club_leg-a-19_1460675800545.jpg">
              </a>
              <p>Item Caption</p>
            </div>
            <div class="item">
              <a href="#">
                <img src="images/recent-news-2.jpg">
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>