css - 有边界的绝对位置？

Question

我在下面提供了一个示例链接，该示例完美地说明了我的要求。

我想知道从哪里开始做这样的事情。我想在滚动时将元素定位为居中，但以某种方式尊重某种边界。像这个例子(The It's a Big World finding your way 文本框):https://ueno.co/work/lonely-planet

我确实知道 position:absolute、float:left 和水平居中。但我不知道他是如何让这个框只滚动有限的量。

我真正需要的只是一个起点，有教程吗？尖端？从哪里开始？我已经使用了标识符，但我对此一头雾水。这在我正在构建的网站上看起来很棒。

任何回复都会很有帮助!如果需要，我可以提供指向我在 squarespace 中工作的网站的链接，现在我只需要一个方向。

EXAMPLE

Answer 1

目前，使用纯 CSS 无法实现您想要的效果。您显示的示例使用 React 框架:https://facebook.github.io/react/

如果您有时间，并且想以同样的方式进行操作，您可以按照该站点上的教程进行操作。