修复了 div 上的滚动
Fixed scrolling on a div
我正在更新我的投资组合，想尝试实现在这个网站 http://matthias.webrom.fr/ 上完成的效果，其中着陆页本身不会滚动，但内容会滑过它。如果将 background-attachment: fixed 放在背景上，则效果与背景相同。有没有办法只使用 CSS 在 div 上实现相同的效果？
网站 http://matthias.webrom.fr/ 由两个主要部分组成，header 和 page_content。 header 包含您要复制的效果的首页，page_content 包含网站的其余部分。这个用Developer Tools很容易看出来（在chrome中去View->Developer->Developer Tools），这个工具非常好用！ （我建议你学习如何使用它）
如果您查看 header CSS，您会看到：
background-attachment: fixed;
这会强制背景保持在同一位置（因此不会与其余内容一起滚动）。但是，这仅适用于背景图像。在 header 中有一个包含文本的部分元素。节位置设置为：
position: fixed;
这会强制文本保持在同一位置，因为它是相对于浏览器 window 而不是文档流定位的。
现在，为了让 header 出现在 page_content 后面，您必须使用 z-index。您希望 header 落后于其他所有内容，因此它的 z-index 必须低于 page_content。
我正在更新我的投资组合，想尝试实现在这个网站 http://matthias.webrom.fr/ 上完成的效果，其中着陆页本身不会滚动，但内容会滑过它。如果将 background-attachment: fixed 放在背景上，则效果与背景相同。有没有办法只使用 CSS 在 div 上实现相同的效果？
网站 http://matthias.webrom.fr/ 由两个主要部分组成，header 和 page_content。 header 包含您要复制的效果的首页，page_content 包含网站的其余部分。这个用Developer Tools很容易看出来（在chrome中去View->Developer->Developer Tools），这个工具非常好用！ （我建议你学习如何使用它）
如果您查看 header CSS，您会看到：
background-attachment: fixed;
这会强制背景保持在同一位置（因此不会与其余内容一起滚动）。但是，这仅适用于背景图像。在 header 中有一个包含文本的部分元素。节位置设置为：
position: fixed;
这会强制文本保持在同一位置，因为它是相对于浏览器 window 而不是文档流定位的。
现在，为了让 header 出现在 page_content 后面，您必须使用 z-index。您希望 header 落后于其他所有内容，因此它的 z-index 必须低于 page_content。