防止内容与粘性 header 的边距重叠

Question

我的布局设置如下面的代码片段所示。

我正在尝试用 margin-top: 20px;

制作粘性 header

我在想一个方法，可以产生一个粘性header，向下滚动时内容不会与粘性header的top-margin重叠。

在提供的片段中，您可以看到，内容与 header 部分上方的空白 space 重叠。这是我想避免的。我希望始终在 header 上方看到 20px 的背景图片。

我能想出的唯一解决方案是将整个内容拆分为 header div 和 body div，并给出背景，这样背景看起来仍然像一块。

这在右侧给出的图片中有说明。这就是 我知道它可以完成的方法，但对我来说这不是最好的方法，因为我想将内容分组为一个 div 和不要分成 2 个独立的。

在左侧是我想要实现的：内容的蓝色部分不应该是可见的，相反，背景图片应该是可见的。 header 应该有所需的 position: sticky; top: 20px;.

这甚至可以通过任何其他方式实现，还是我必须将 header 和内容拆分为 2 个不同的 div` 才能实现此目的？

这是检查当前行为的代码片段：

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: darkgray;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat center center fixed;
  background-size: auto;
  background-size: cover;
  min-width: 270px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  
}

.container-box {
  display: block;
  margin: 20px auto;
  padding: 20px;
  background-image: linear-gradient(red 100px, yellow 100px, yellow);
  height: auto;
  max-width: 920px;
  border-radius: 10px;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.navigation {
position: sticky;
top: 20px;
background-color: red;
}

.top-navigation {
  text-align: right;
  margin-bottom: 20px;
}

.bot-navigation {
  text-align: center;
  margin-bottom: 20px;
}

.content{
  text-align: center;
}

<body>
  <div class="main">
    <div class=" container-box ">
      <div class="navigation">
        <div class="top-navigation">
          <button>Logout</button>
        </div>
        <div class="bot-navigation">
          SOME NAVIGATION OVER HERE
        </div>
      </div>
      <div class="content">
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br> 
        SOME CONTENT<br>

      </div>
    </div>
  </div>
</body>

Answer 1

你可以考虑使用伪元素的技巧，因为你使用的是 fixed with background。您将相同的背景应用到伪元素并将其放在顶部以创建错觉

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: darkgray;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.container-box {
  display: block;
  margin: 20px auto;
  background: yellow;
  border-radius: 10px;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.navigation {
  position: sticky;
  top: 40px;
  background-color: red;
  padding:0 20px 20px;
}

/* this will do the magic*/
.navigation:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -2px;
  right: -2px;
  height: 40px;
  background: url('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/cover.jpg') no-repeat fixed;
  background-size: cover;
}
/**/
/* for the radius*/
.navigation:after {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  right:0;
  height:20px;
  background:red;
  border-radius:10px 10px 0 0;
}
/**/

.top-navigation {
  text-align: right;
  margin-bottom: 20px;
}

.bot-navigation {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  text-align: center;
}

<div class="main">
  <div class=" container-box ">
    <div class="navigation">
      <div class="top-navigation">
        <button>Logout</button>
      </div>
      <div class="bot-navigation">
        SOME NAVIGATION OVER HERE
      </div>
    </div>
    <div class="content">
      SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT
      <br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME
      CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT
      <br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br> SOME CONTENT<br>

    </div>
  </div>

防止内容与粘性 header 的边距重叠

prevent content to overlap margin of sticky header

css

header

sticky