我如何理解也有左/右邊距的固定div？

Question

據說固定div只是從整個頁面中取出，並且與客戶端窗口有固定的關係。我認爲這很容易，直到我讀到這個post的最佳答案。在這種情況下，我看不到固定div與窗口邊界之間的強關係。

任何人都可以解釋在固定div上設置相對位置的內在魔法嗎？

Answer 1

這裏有兩個單獨的問題：

1. 如何position: fixed;作品。
2. 在什麼地方放置絕對和固定位置的物品，那麼你沒有寫上/左/下/右座標。

您在您的文章寫

約position: fixed;基本上是正確的 - 固定物體取出頁面，並貼到窗口邊框。如果你使用左/右/上/下來提供起始位置，它將從窗口對象中對它們進行計數。

但是如果您添加position: fixed;會發生什麼，但是沒有添加座標或僅添加一維座標？

如果您這樣做，那麼對象的起始位置將從它從頁面流中移除之前的位置計算得出。

讓我們用position: absolute;嘗試一些簡單的例子（它的工作原理與這方面的固定方法大致相同）。

jsFiddle of our examples are here

實施例與position: static;：

`<div>First sentence. <mark>Second sentence.</mark> third sentence. </div>` 

在此示例中第二個句子是頁面流內，因此它被定位後第一個句子和前三分之一。

實施例與position: absolute;：

<div>First sentence. <mark style="position: absolute;">Second sentence.</mark> third sentence.</div> 

在此示例中第二句子被從頁面流截取，但並沒有給出的座標。所以它定位在第一句話之後（如果來自流程，那麼它就是我們移除之前的地方），但是第三句話現在在第二句話之下，因爲如果它不再是流動的話。

用position: absolute;和;左：0;`：

<div>First sentence. <mark style="position: absolute; left: 0;">Second sentence.</mark> third sentence.</div> 

最後我們給出第二句left: 0;一些起點，所以現在它不僅沒有佔用任何空間，同時也移動到容器的左翼黨。 （但它仍然和以前一樣高，因爲我們沒有添加任何top或right座標）。

position: fixed;工作非常相似。所以在原來的帖子作者只是修正了頂部座標，並沒有修正左邊的權利。因爲這個對象被水平放置在頁面流的原始位置。