防止内容与粘页眉的页边空白重叠

Question

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

我正在尝试使用margin-top: 20px;制作粘性标头>

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

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

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

在给出的图片中，在右侧

上进行了说明。这是我知道可以做到的的方式，但是对我来说，这并不是最好的方法，因为我希望将内容分为一个div而不是两个单独的div。]

在左侧是我要达到的目标：内容的蓝色部分应该不可见，而背景图片应该是可见的。并且标题应具有所需的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>

我在下面的代码段中设置了布局。我正在尝试使用margin-top创建一个粘性标头：20px;我在想一个方法，该方法可能产生粘性标头，而内容没有...

Answer 1

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

防止内容与粘页眉的页边空白重叠

问题描述投票：0回答：1

1个回答

最新问题

防止内容与粘页眉的页边空白重叠

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1