获取固定位置元素以不阻止其他内容

时间：2019-06-04 22:38:13

标签： css css-position

说我正在使用header元素创建导航栏：

header {
  border: 1px solid #a2a2a2;
  width: 100vw;
  height: 150px;
  position: fixed;
  top: 0;
  z-index: 1;
}

现在，当用户向下滚动时，导航栏显然会覆盖150px的内容。有没有办法告诉此fixed导航栏下面的所有元素“清除”它或类似的东西？以便导航栏保持固定但不覆盖内容？

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

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

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  height: 150px;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 1;
}


/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {
  .header,
  .main-nav {
    display: flex;
  }
  .header {
    flex-direction: column;
    align-items: center;
    .header {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

.parallex {
  background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
  background-attachment: fixed;
  height: 100vh;
}

.text-in-parallex {
  position: relative;
  top: 70vh;
  left: 28vw;
  color: white;
  font-size: 45px;
}

body {
  background-color: #EEEEEE;
  /* #EE2324 */
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 80%;
  margin: 20px auto 100px auto;
  padding-bottom: 100px;
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 3px;
  /* Shadow */
  -moz-box-shadow: 0px 3px 30px 1px #ccc;
  -webkit-box-shadow: 0px 3px 30px 1px #ccc;
  box-shadow: 10px 15px 30px 15px #ccc;
  font-family: 'Alice', serif;
}

.table-of-contents {
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.table-of-contents>h2 {
  text-align: center;
  margin-bottom: 10px;
}

.inner-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: white;
  padding: 20px 20px 25px 20px;
  border-radius: 3px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: 20px;
}

.menu-section {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 20.9368px;
  font-weight: 400;
  margin-bottom: 10px;
}

.menu-section>a {
  text-decoration: none;
  color: #999999;
  padding-left: 7px;
}

.menu-section>a:hover {
  border-left: 1px solid blue;
  color: #1f5ea9;
  text-decoration: underline;
}

.name-of-food {
  font-size: 20px;
}

.food-description {
  color: grey;
  font-style: italic;
}

.food-section {
  grid-column: 1 / 3;
  text-align: center;
  padding-top: 20px;
  font-size: 2em;
}

.food-section:nth-child(1) {
  padding-top: 0;
}

.restaurant-info {
  grid-column: 1 / 3;
  text-align: center;
  border: 1px solid lightgray;
  padding: 20px 0px;
}

#search-form {
  border-radius: 3px;
  text-align: center;
  margin-bottom: 10px;
}

#search-input {
  width: 80%;
}

.fab {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 3px;
}

.fab:hover {
  opacity: 0.7;
  cursor: pointer;
}

.fa-facebook-square {
  background: #3B5998;
  color: white;
}
<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div class="menu-grid">
  <div class="restaurant-info">
    <h1>Example Pizzeria</h1>

  </div>
  <div class="table-of-contents">
    <h2>Menu</h2>
    <form id="search-form">
      <input id="search-input" type="search" placeholder="Or search for an item..." />
    </form>
    <h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
    <h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
    <h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
    <h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
    <h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
    <h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
  </div>

  <div class="inner-menu-grid">
    <h2 id="appetizers" class="food-section">Appetizers</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <h2 id="pizza" class="food-section">Pizza</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="salads" class="food-section">Salads</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="pasta" class="food-section">Pasta</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Pasta item</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="sandwiches" class="food-section">Sandwiches</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

  </div>
  <!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->

View on JSFiddle

3 个答案:

答案 0 :(得分：1)

创建一个包含两行的网格，将导航栏放在第一行，将内容放在第二行，并确保第一行从顶部开始，并从顶部开始150px。

答案 1 :(得分：0)

您可能会发现position:sticky很有帮助。
看来您已经将其用于“目录”部分。

  

粘性定位元素是其计算出的位置值为粘性的元素。它被视为相对定位，直到其包含的块在其流根（或在其中滚动的容器）内超过指定的阈值（例如，将top设置为auto以外的值），在该点处将其视为“卡住”，直到达到其包含块的相对边缘。 -position。

也请注意browser compatibility for position:sticky。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

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

h2,
h3,
a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,
.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  height: 150px;
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 100vw;
  position: sticky;
  top: 0;
  z-index: 1;
}


/* =================================
  Media Queries
==================================== */

@media (min-width: 769px) {
  .header,
  .main-nav {
    display: flex;
  }
  .header {
    flex-direction: column;
    align-items: center;
    .header {
      width: 80%;
      margin: 0 auto;
      max-width: 1150px;
    }
  }
}

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

.parallex {
  background: url("https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/277233_456825154330649_1101536084_o.jpg?_nc_cat=106&_nc_ht=scontent-lga3-1.xx&oh=a23cf28b01ae96e2585b36164a747906&oe=5D567AAB") no-repeat center bottom /cover;
  background-attachment: fixed;
  height: 100vh;
}

.text-in-parallex {
  position: relative;
  top: 70vh;
  left: 28vw;
  color: white;
  font-size: 45px;
}

body {
  background-color: #EEEEEE;
  /* #EE2324 */
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 80%;
  margin: 20px auto 100px auto;
  padding-bottom: 100px;
  border: 1px solid lightgray;
  background-color: white;
  border-radius: 3px;
  /* Shadow */
  -moz-box-shadow: 0px 3px 30px 1px #ccc;
  -webkit-box-shadow: 0px 3px 30px 1px #ccc;
  box-shadow: 10px 15px 30px 15px #ccc;
  font-family: 'Alice', serif;
}

.table-of-contents {
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.table-of-contents>h2 {
  text-align: center;
  margin-bottom: 10px;
}

.inner-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  background-color: white;
  padding: 20px 20px 25px 20px;
  border-radius: 3px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
}

.price {
  font-size: 20px;
}

.menu-section {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 20.9368px;
  font-weight: 400;
  margin-bottom: 10px;
}

.menu-section>a {
  text-decoration: none;
  color: #999999;
  padding-left: 7px;
}

.menu-section>a:hover {
  border-left: 1px solid blue;
  color: #1f5ea9;
  text-decoration: underline;
}

.name-of-food {
  font-size: 20px;
}

.food-description {
  color: grey;
  font-style: italic;
}

.food-section {
  grid-column: 1 / 3;
  text-align: center;
  padding-top: 20px;
  font-size: 2em;
}

.food-section:nth-child(1) {
  padding-top: 0;
}

.restaurant-info {
  grid-column: 1 / 3;
  text-align: center;
  border: 1px solid lightgray;
  padding: 20px 0px;
}

#search-form {
  border-radius: 3px;
  text-align: center;
  margin-bottom: 10px;
}

#search-input {
  width: 80%;
}

.fab {
  padding: 10px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 3px;
}

.fab:hover {
  opacity: 0.7;
  cursor: pointer;
}

.fa-facebook-square {
  background: #3B5998;
  color: white;
}
<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Menu</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

<div class="menu-grid">
  <div class="restaurant-info">
    <h1>Example Pizzeria</h1>

  </div>
  <div class="table-of-contents">
    <h2>Menu</h2>
    <form id="search-form">
      <input id="search-input" type="search" placeholder="Or search for an item..." />
    </form>
    <h3 class="menu-section"><a id="appetizers-link" href="#appetizers">Appetizers</a></h3>
    <h3 class="menu-section"><a id="rolls-calzones-link" href="#rolls-calzones">Rolls & Calzones</a></h3>
    <h3 class="menu-section"><a id="pizza-link" href="#pizza">Pizza</a></h3>
    <h3 class="menu-section"><a id="salads-link" href="#salads">Salads</a></h3>
    <h3 class="menu-section"><a id="pasta-link" href="#pasta">Pasta</a></h3>
    <h3 class="menu-section"><a id="sandwiches-link" href="#sandwiches">Sandwiches</a></h3>
  </div>

  <div class="inner-menu-grid">
    <h2 id="appetizers" class="food-section">Appetizers</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="rolls-calzones" class="food-section">Rolls and Calzones</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <h2 id="pizza" class="food-section">Pizza</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Zucchini Sticks</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Stuffed Mushrooms</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food"> Mozzarella Sticks (5)</span>
        <p class="food-description">Served with marinara sauce</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Baked Clams</span>
      </div>
      <div class="price">
        $8.96
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozarella Caprese</span>
        <p class="food-description">Fresh mozzarella, tomatores, basil, olive oil & balsamic vinegar</p>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Mozzarella Sticks (5)</span>
      </div>
      <div class="price">
        $7.50
      </div>
    </div>

    <h2 id="salads" class="food-section">Salads</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="pasta" class="food-section">Pasta</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Pasta item</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

    <h2 id="sandwiches" class="food-section">Sandwiches</h2>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Buffalo Chcicken Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Spinahc Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Sausage Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>
    <div class="menu-item">
      <div class="food-item">
        <span class="name-of-food">Chicken and Broccoli Roll</span>
      </div>
      <div class="price">
        $6.95
      </div>
    </div>

  </div>
  <!--close .inner-menu-grid-->
</div>
<!--close .menu-grid-->

答案 2 :(得分：0)

我建议，如果您不希望内容被标题遮挡，position: fixed可能不是最佳解决方案。另一种方法是对页面进行布局，以使页眉具有固定的高度，然后下面的内容占据页面的其余高度，overflow设置为auto，以便滚动但标头不会。

简单示例：

<main>
  <header>...</header>
  <div class="content">...</div>
</main>

body, html {
  height: 100%;
}

main {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  height: 200px;
  flex: 0 0 auto;
}

.content {
  flex: 1;
  overflow: auto;
}
相关问题
最新问题