将绝对元素固定到位置静态最大宽度容器

Question

让我们说在我的身体内容中，我有一个内容边界元素，最大宽度为1200px。随着窗口增长超过1200px，内容边界仍然以1200px为中心（见下图1）。

图1： 现在我添加了一个绝对的弹出位置＆＃39;位于元素顶部的盒子，用于放置在内容的边界（右侧）（见图2）。

图2： 这个问题：

• 弹出窗口和内容容器之间没有隐式关系，也没有内容边界边缘的任何元素。元素可以自由地放在标记中。
• 在这个相当脆弱的代码库中，我不能让内容边界位置相对而不会有回归的风险。

我已经确定最简单的方法是将弹出窗口向右移动，然后向后转换到内容的边缘。

图3：

但问题是，我如何计算像素数量？

Answer 1

仅限CSS

假设外部容器是窗口的整个宽度，可以使用单个calc来完成。我们可以使用vw来获取窗口的确切大小。

第1步：

x =视口宽度 - 内容容器宽度

如果100vw = 1600px

e.g。 1600px - 1200px = 400px

此减法的返回值是内容容器两侧的空格总和。如果内容容器居中，则除以2将返回一个装订线的大小。

第2步：

x =（视口宽度 - 内容容器宽度）/ 2

如果100vw = 1600px

e.g。 （1600px - 1200px）/ 2 = 200px

此值可用于将弹出窗口锁定到左侧（即，如果它位于left: 0;处）

但是，我们需要将此值设为负值才能将弹出窗口翻译到左侧。

第3步：

乘以-1使数字为负数

x =（（视口宽度 - 内容容器宽度）/ 2）* -1

e.g。 （（1600px - 1200px）/ 2）* -1 = -200px

第4步：现在全部在一起

transform: translateX(calc(((100vw - 1200px) / 2) * -1));

对于演示：https://codepen.io/3stacks/pen/wjExrw