固定位置时是否防止元素随页面滚动？

Question

是否可以使元素具有固定位置，但阻止其随页面滚动？

我的问题：我正在构建一个工具提示，可以根据页面上的可用空间动态确定其位置。 它需要弹出其目标元素旁边的所有其他内容，并且不占用空间。 所以我最初认为位置是绝对的。

但是绝对位置基于元素的父包装。 我的页面被包裹在多个我无法控制的包装器中（在Salesforce上，但这不一定是Salesforce的特定问题）。

因此，我需要将其放置在视口之外，而不要依赖最终包裹在其上的父对象。因此，固定位置可以很好地工作。

唯一的问题是位置固定，元素随页面滚动。 我真的不希望工具提示跟随用户滚动。

由于无法控制父包装器，我觉得我需要根据视口保持位置。 但是我发现的所有位置都是固定的，因此不确定是否存在阻止该元素随页面滚动的方法。

Answer 1

似乎您想使用position: absolute; 而不是固定的。

Answer 2

如果您设置在position: fixed ，那么我知道让元素随着用户滚动而随页面其余部分移动的唯一方法是在浏览器滚动事件触发时使用JavaScript编辑位置。 否则，如果您首先相对于视口定位，那么您将一直相对于视口定位。 但是，挂接到滚动事件不一定能很好地执行，尽管有可用的防反跳功能可以帮助解决此问题，但这并不是我的首选。

但是，您可能可以使用position: absolute而不必与多余的页面包装程序纠缠在一起。 是否有一个具有以下属性的元素（称为A）：

• 您的工具提示位于A内（或可以移至A内）
• 您可以相对于A正确定位工具提示
• 多余的包装纸总是在A外

如果是这样，请在元素A上设置position: relative 。您的工具提示将使用A作为参考，而不使用A之外的额外包装器（即使该包装器上也有position: relative设置）。