布局帮助：zIndex 和溢出答案

【问题标题】：Layout help: zIndex and Overflow布局帮助：zIndex 和溢出
【发布时间】：2020-02-19 10:02:09
【问题描述】：

我有一个固定的标题和侧边栏。理想情况下，我希望内容保持在固定布局内。我当前的问题是我所有的内容都保存在<Content> 中，当我向下滚动时，我希望内容和标题之间始终存在间隙。

向下滚动时标题和内容之间的目标空间

目前没有空位。

【问题讨论】：

如果您不想将滚动条放在内容元素本身上，而是将其保留为整页滚动条，那么我认为您别无选择，只能通过以下方式模拟此“间隙”为您的标题添加边框或填充，或在此位置上方放置另一个元素，以便它“遮蔽”其下方的内容。（对于使用图像等的精致背景，这当然可能不会顺利工作，但主要是用于纯色。）
谢谢。您建议我应该为“最佳实践”方法做些什么？理想情况下，我希望有一个整页布局并且只在内容组件内滚动。
@04FS 抱歉，我忘了添加 Codesandbox 链接。请查看我当前的设置。为了便于查看组件，背景颜色已更改。

【解决方案1】：

您可以尝试使 body 标签不可滚动并在其中添加 2 个 div。一个是要保持在固定标题和内容之间的具有高度的简单 div，第二个是具有内容类并将内容放入其中的 div。之后，您可以在 div 上添加溢出滚动什么“内容”类 Here is the link of example

body{
  position: relative;
  margin:0;
  padding:100px 0 0 0;
  overflow:hidden;
}

.fixed-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: red;
  color:#000;
  display: flex;
  align-items:center;
  justify-content:center;
}

.spacer{
  height: 50px;

}

.content{
  overflow-y:scroll;
  height:60vh;
}

【讨论】：

我试图通过一个

来模拟这一点，但似乎无法让它工作。是您可以在代码框上进行更改以直观地看到这一点吗？