粘性标题 - 相对于动态标题长度的正文位置

Question

试图让页眉贴在页面顶部 - postion:fixed - 有效

但是在这样做时，正文不能相对于标题放置 - 如果 position:relative Demo 是可能的

我想要达到的目标 -

• 随滚动移动的粘性标题

• 与上述标题相对高度的主体（高度是动态的）

到目前为止我做了什么：DEMO

我正在尝试寻找一个 Pure CSS（它甚至可能吗？）解决方案，但没有成功 - 感谢任何帮助

Answer 1

尝试将padding-top: XXX 添加到正文包装器 div，其中 XXX 等于标题高度。为了使用纯 CSS 做到这一点（具有固定的标题和可滚动的正文），您必须预先知道标题的高度。否则会覆盖body div的顶部。