Html 使用css网格布局的粘性标题下方的粘性边栏

我的布局是基于css网格的。我使用以下方法将标题粘贴到顶部：

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;

但是，如果我尝试对任何侧栏使用相同的代码，但对实例使用top:200px，则无法工作

这是我的代码笔的代码，如果你觉得更容易的话。然而，我也包括它下面没有lipsum

我不想使用position:fixed来破坏网格布局。有没有其他更简单的方法来做到这一点，同时保留网格？。。。提前感谢您帮助这个新手

<div class="container">
  <header class="header pd">Header</header>



    <div class="left-sidebar pd">
      <div class="box-1 pd">
        Box-1
      </div>
      <footer class="footer pd">
        Footer
      </footer>
    </div>

    <div class="main-content pd">
      Main content 
    </div>


    <div class="right-sidebar pd">
      <div class="box-2 pd">
        Box-2
      </div>
      <div class="box-3 pd">
        Box-3
      </div>
    </div>


</div>

如果我尝试对任何侧边栏使用相同的代码，但对实例使用top:200px，则无法工作

不要将此属性应用于具有class.left侧边栏的块，而是应用于其中的块。您可以为此创建一个附加元素。例如，.left内部元素

后果 .集装箱{ 宽度：100%； 保证金：0自动； 背景色：eee； 显示：网格； 网格模板行：最小内容1fr； 网格模板列：1fr 2fr 1fr； 栅极间隙：15px； 栅格模板区域：头部左侧栏主右侧栏； } .容器>*{ 背景颜色：粉红色； 颜色：ggg； 字体大小：20px； 字体系列：无衬线； } 博士{ 填充：15px； } .标题{ 网格区域：头部； 职位：-网络工具包粘性； 位置：粘性； 排名：0； z指数：10； } .左侧边栏{ 网格区域：左栏； 显示器：flex； 弯曲方向：立柱； 调整内容：灵活启动； } .左侧边栏.左侧内边栏{ 职位：-网络工具包粘性； 位置：粘性； 顶部：200px； } .左侧边栏。框-1{ 颜色：红色； 边框：1px纯紫色； 边缘底部：5px； } .左侧边栏.页脚{ 颜色：绿色； 边框：1px纯紫色； } .主要内容{ 网格区域：主； } .右侧边栏{ 网格区域：右栏； 显示器：flex； 弯曲方向：立柱； 调整内容：灵活启动； } .右侧边栏。框-2{ 颜色：红色； 边框：1px纯紫色； 边缘底部：5px； } .右侧边栏。框-3{ 颜色：绿色； 边框：1px纯紫色； } 标题 方框-1：劳动和就业临时合同签订后，精英们将继续履行义务。但是，在最低限度上，我们需要一个实验室来进行日常工作。 页脚 主要内容包括明确无误的知识、知识、知识、知识和知识，以及必须明确的知识产权和准架构。尼莫·埃尼姆·伊普萨姆·沃鲁帕特姆 如果你是一个成功的人，那么你就应该为自己的行为负责。如果你是我的朋友，那么你就可以坐在我的位子上，我可以坐在你的位子上，我可以坐在你的位子上，我可以坐在你的位子上，我可以坐在你的位子上，我可以坐在你的位子上 劳动和就业的暂时性变化是平等的。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？你是谁 在一个自由的世界里，它是一个自由的世界，它是一个自由的世界吗？但最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本、最低限度的最低成本 消费？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护？但是，我们必须尽可能少地练习身体 是否有实验室记录，是否有普通消费品的流动性？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护？最低限度 在实验室里，你是否可以在日常消费中使用流动性？在一个自由的世界里，我们需要一个自由的世界，一个自由的世界 你认为这是无效的吗？但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？我们必须在法律上尊重所有人 消费，你的生活是什么？ 方框-2 框-3：劳动和就业临时合同签订后，精英们将继续履行义务。但是，在最低限度上，我们需要一个实验室来进行日常工作。

---

谢谢@hisbvdis。这解决了一个top的问题：60px；而不是我之前尝试的200px。如果你不介意我问的话，有没有办法保持边栏和头球之间的距离？@Fergo，不幸的是，我没有 知道它是否能被修复。也许你应该在另一个问题中问这个问题。

.container {
  width: 100%;
  margin: 0 auto;
  background-color: #eee;

  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 15px;

  grid-template-areas: "head head head"
                       "leftbar main rightbar";

  & > * {
    background-color: pink;
    color: #ggg;
    font-size: 20px;
    font-family: sans-serif;
  }
}

  .pd {
    padding: 15px;
  }

  .header {
    grid-area: head;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .left-sidebar {
    grid-area: leftbar;

    position: -webkit-sticky;
    position: sticky;
    top: 200px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .box-1 {
      color: red;
      border: 1px solid purple;
      margin-bottom: 5px;
    }

    .footer {
      color: green;
      border: 1px solid purple;
    }
  }

  .main-content {
    grid-area: main;
  }

  .right-sidebar {
    grid-area: rightbar;

     display: flex;
     flex-direction: column;
     justify-content: flex-start;

      .box-2 {
        color: red;
        border: 1px solid purple;
        margin-bottom: 5px;
      }

      .box-3 {
        color: green;
        border: 1px solid purple;
      }
  }