CSS定位不僅僅是X，Y坐標
CSS定位一直是創建網站佈局的重要部分。 即使隨著Flexbox和CSS Grid等新的CSS佈局技術的興起，定位在任何網頁設計師的一攬子技巧中仍佔有重要地位。
在使用CSS定位時，您需要做的第一件事就是建立CSS屬性來告訴瀏覽器您是否要為給定元素使用絕對定位或相對定位。 您還需要清楚地了解這兩個定位屬性之間的差異。
雖然絕對和相對是網頁設計中最常用的兩個CSS位置屬性，但position屬性實際上有四個狀態：
- 靜態的
- 絕對
- 相對的
- 固定
靜態是網頁上任何元素的默認位置。 如果你沒有定義元素的位置，它將是靜態的。 這意味著它將根據它在HTML文檔中的位置顯示在屏幕上，以及它如何在該文檔的正常流程內顯示。
如果將頂部或左側的定位規則應用於具有靜態位置的元素，則這些規則將被忽略，並且該元素將保留在正常文檔流中出現的位置。 事實上，如果有的話，您很少需要將元素設置為CSS中的靜態位置，因為這是默認值。
絕對CSS定位
絕對定位可能是最容易理解的CSS位置。 你從這個CSS位置屬性開始：
位置：絕對;該值告訴瀏覽器，無論將要放置什麼，都應該從文檔的正常流程中移除，而不是放在頁面上的確切位置。 這是根據該元素最接近的非靜態定位祖先來計算的。
由於絕對定位的元素不在文檔的正常流程中，因此不會影響HTML之前或之後的元素在網頁上的位置。
舉個例子 - 如果你有一個使用相對值定位的分區（我們很快就會看到這個值），並且在該分區內有一個段，你想從分區頂部放置50個像素，你會在該“段落”屬性上添加一個“絕對”的位置值以及50px的偏移值，像這樣。
位置：絕對; 頂部：50px;這個絕對定位的元素將始終顯示距相對定位區域頂部50個像素，而不管正常流程中顯示的是什麼。 你的“絕對”定位元素使用相對定位的元素作為其上下文，你使用的定位值是相對的。
您可以使用的四個定位屬性是：
- 最佳
- 對
- 底部
- 剩下
您可以使用頂部或底部（因為無法根據這兩個值定位元素）以及右側或左側。
如果一個元素被設置為絕對位置，但是它沒有非靜態定位的祖先，那麼它將相對於身體元素進行定位，該元素是頁面的最高級元素。
相對定位
我們已經提到了相對定位，現在我們來看看這個屬性。
相對定位使用與絕對定位相同的四個定位屬性，但不是將元素的位置基於其最接近的非靜態定位的祖先，而是從元素所在的位置開始，如果它仍處於正常流動中。
例如，如果您的網頁上有三個段落，並且第三個段落上放置了“位置：相對”樣式，則位置將根據其當前位置進行偏移。
第1段
第2段
Paragraph 3。
在上面的例子中，第三段將位於容器元素左側2em處，但仍然在前兩段之下。 它將保持在文檔的正常流程中，只是稍微抵消。 如果您將其更改為position：absolute; 之後的任何內容都會顯示在它的頂部，因為它不再處於文檔的正常流程中。
網頁上的元素通常用於設置位置值：相對於沒有建立偏移值的值，這意味著元素保持其在正常流中出現的位置。 這完全是為了將該元素確定為可以絕對定位其他元素的上下文。 例如，如果您的整個網站上有一個部門，其類別值為“容器”（這是網頁設計中非常常見的場景），則可以將該部門設置為相對位置，以便其內部的任何內容都可以使用它作為一個定位上下文。
固定定位怎麼樣？
固定定位很像絕對定位。 元素的位置與絕對模型的計算方式相同，但固定元素隨後固定在該位置 - 幾乎就像水印一樣 。 然後頁面上的所有其他內容將滾過該元素。
要使用此屬性值，您可以設置：
位置：固定;請記住，當您在網站上修復某個元素時，它將在您的網頁打印出來時在該位置進行打印。 例如，如果您的元素固定在頁面頂部，則它會出現在每個打印頁面的頂部 - 因為它固定在頁面的頂部。 您可以使用媒體類型來更改打印頁面顯示固定元素的方式：
@media screen {h1＃first {position：fixed; }} @media print {h1＃first {position：static; }}Jennifer Krynin的原創文章。 1/7/16由Jeremy Girard編輯。