在容器边缘定位元素

Question

希望用我在这里嘲笑的图片更好地解释这一点：

我有一个全宽，100vh的区域，其.container的最大宽度为100％/ 1200px，最大宽度为100vh（当然是居中的。）。在这个容器里面，我将有3个元素（红色的X）。

如何让这些元素的中心点直接贴在容器的边缘？我的最终目标是让它们看起来漂浮，但随着屏幕宽度缩小并且.container宽度开始崩溃，项目会跟随该边缘并且看起来只是在屏幕上达到峰值。

CodePen

Answer 1

好的，我发现了这个问题。变换会更改原始对象大小的流量。因此，虽然我的元素按比例缩小，但它们的原始边界框却没有。 #themoreyouknow

Answer 2

理论上，如果irems属于容器，具有position:fixed和正确的top / left值，即使您移动容器或调整屏幕大小，它们也应该坚持。如果没有，您还可以使用一个函数，无论何时调整容器大小，元素位置都会按比例更改。