固定位置時是否防止元素隨頁面滾動？

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設置）。