导航栏固定位置以及它如何影响其他元素的定位

Question

我正在尝试将导航栏修复到页面顶部。我已经成功地将导航栏设置为“固定”，但是由于固定位置跳出了文档的正常流程，我放置在它下面的内容现在太高了，基本上在导航栏后面，而不是开始有点在导航栏下方居中。

理想情况下，我希望导航栏在开始滚动页眉后固定到页面的最顶部...但我不确定仅使用 html/css 是否可行。 （此时我只知道一点 JS）本质上，我最想知道如何重新控制将我的内容定位在导航栏下方（而不是在它后面）。

<h1 class="name-header">Lacy Roe Recipes</h1>


<nav class="header-wrapper">
    <ul class= "header-nav">
        <li>
            <a href=# class="header-nav-link">Home</a>
        </li>
        <li class="header-nav-link-dropdown">
            <a href=# class="header-nav-link">Recipes</a>
        </li>
        <li>
            <a href=# class="header-nav-link">Cookbooks</a>
        </li>
        <li>
            <a href=# class="header-nav-link">About</a>
        </li>
        <li>
            <a href=# class="header-nav-link">Work With Me</a>
        </li>
        <li>
            <a href=# class="header-nav-link">Contact</a>
        </li>
        <li>
            <a href=# class="header-nav-link" class="search-icon"><i class="fas fa-search"></i><input type="text" class="search-area"></a>
        </li>
    </ul>
</nav>

<div class="feature-recipe-div">
    <div class="feature-paragraph-div">
        <h2 class="feature-recipe-header">New Lunch Classics</h2>
        <p class="feature-recipe-talk">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facilis, iure sed quo, expedita nam voluptates consequatur eius vero omnis accusantium. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quibusdam voluptatem facilis aut cumque consequuntur fugiat dicta, praesentium sapiente mollitia in nobis dolorum voluptates iste, laboriosam porro saepe maiores vitae. </p>
        <p><a href="#" class="feature-recipe-link">Continue Reading</a></p>
    </div>
    <div class="main-img-div">
        <img class="main-img" src="https://greenkitchenstories.com/wp-content/uploads/2013/01/Breakfast_bowl_2.jpg">
        <p class="cite">Photograph by David Frankel</p>
    </div>
</div>

.full-page-div{
width:90%;
margin: 0 auto;
}

.name-header{
font-family:'Raleway';
font-size:25px;
color:grey;
text-transform: uppercase;
margin-bottom:80px;
}

.feature-recipe-div{
display:flex;
width:100%;
justify-content: space-between;
margin-bottom:80px;
z-index:1;
}

.feature-paragraph-div{
width:55%;
}

.feature-recipe-talk, .feature-recipe-link{
font-family:'Cormorant';
font-size: 18px;
}

.feature-recipe-link{
color:grey;
}

.feature-recipe-header{
text-align: center;
font-family:'Raleway';
font-size:50px;
color:black;
font-weight:400;
}

.header-wrapper{
position: fixed;
position: top;
z-index:10;
width:90%;
background-color: white;
}

.header-nav{
display:flex;
list-style:none;
justify-content:space-evenly;
border-bottom: 1px solid black;
padding-bottom:10px;
margin-bottom:50px;
z-index:10;
}

.header-nav-link{
text-decoration:none;
font-family: 'Raleway';
text-transform: uppercase;
color: grey;
} 

Answer 1

只需将position: sticky; 与top: 0; 结合使用，它就会按预期工作。您的主要问题是以下 css 行：

.header-wrapper{
位置：固定；
位置：顶部;
z-index:10;
宽度：90%;
}

当你第一次声明position: fixed; 和position: top; 之后它的无效css 无效并覆盖第一个。你真正的意思是top: 0;

背景颜色：白色； }

.full-page-div {
  width: 90%;
  margin: 0 auto;
}

.name-header {
  font-family: 'Raleway';
  font-size: 25px;
  color: grey;
  text-transform: uppercase;
  margin-bottom: 80px;
}

.feature-recipe-div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 80px;
  z-index: 1;
}

.feature-paragraph-div {
  width: 55%;
}

.feature-recipe-talk,
.feature-recipe-link {
  font-family: 'Cormorant';
  font-size: 18px;
}

.feature-recipe-link {
  color: grey;
}

.feature-recipe-header {
  text-align: center;
  font-family: 'Raleway';
  font-size: 50px;
  color: black;
  font-weight: 400;
}

.header-wrapper {
  position: sticky;
  top: 0;
  width: 90%;
  background-color: white;
}

.header-nav {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
  margin-bottom: 50px;
  z-index: 10;
}

.header-nav-link {
  text-decoration: none;
  font-family: 'Raleway';
  text-transform: uppercase;
  color: grey;
}

<h1 class="name-header">Lacy Roe Recipes</h1>


<nav class="header-wrapper">
  <ul class="header-nav">
    <li>
      <a href=# class="header-nav-link">Home</a>
    </li>
    <li class="header-nav-link-dropdown">
      <a href=# class="header-nav-link">Recipes</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Cookbooks</a>
    </li>
    <li>
      <a href=# class="header-nav-link">About</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Work With Me</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Contact</a>
    </li>
    <li>
      <a href=# class="header-nav-link" class="search-icon"><i class="fas fa-search"></i><input type="text" class="search-area"></a>
    </li>
  </ul>
</nav>

<div class="feature-recipe-div">
  <div class="feature-paragraph-div">
    <h2 class="feature-recipe-header">New Lunch Classics</h2>
    <p class="feature-recipe-talk">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facilis, iure sed quo, expedita nam voluptates consequatur eius vero omnis accusantium. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quibusdam voluptatem facilis
      aut cumque consequuntur fugiat dicta, praesentium sapiente mollitia in nobis dolorum voluptates iste, laboriosam porro saepe maiores vitae. </p>
    <p><a href="#" class="feature-recipe-link">Continue Reading</a></p>
  </div>
  <div class="main-img-div">
    <img class="main-img" src="https://greenkitchenstories.com/wp-content/uploads/2013/01/Breakfast_bowl_2.jpg">
    <p class="cite">Photograph by David Frankel</p>
  </div>
</div>

Answer 2

这很容易解决。

只需将 margin-top 添加到包含您要移动的内容的 div 中。

例如：

.someDiv{
    margin-top : 15%;
}

让我知道它是否有效:)