Question

我在下面的代码段中设置了布局。

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

做一个粘性标头

我在想一种方法，该方法可以产生一个粘性标头，而向下滚动时内容不会与粘性标头的上边距重叠。

在提供的摘录中，您可以看到内容与标题部分上方的空白重叠。这就是我要避免的。我想一直在标题上方看到20px的背景图片。

我唯一能想到的解决方案是将整个内容分为标题div和正文div，并同时提供背景，这样背景仍然看起来像一块。

在给定的图片中，该图片位于右侧。这是我知道可以完成的方式，但是对我来说，这并不是最好的方法，因为我希望将内容分为一个div而不是两个单独的div。 / p>

在左侧是我要实现的目标：内容的蓝色部分不可见，而背景图片则可见。并且标题应具有所需的position: sticky; top: 20px;。

这是否还有其他可能，还是我必须将标题和内容分成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

由于使用固定背景，因此可以考虑使用伪元素的技巧。您将相同的背景应用于伪元素，然后将其放置在顶部以创建幻觉

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>

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

1 个答案: