整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 中的 position 屬性只有幾個有效值，但這些值會導致無窮無盡的設計可能性，這使得學習定位相當困難。 在本文中，我將分解每個位置值并解釋您需要了解的有關它們的所有信息。
靜態位置 Static Position
首先，我們將介紹您可能從未聽說過但一直使用的最簡單的位置值，那就是靜態位置。 static 是 position 屬性的默認值，本質上只是意味著元素將遵循正常的文檔流并根據標準定位規則定位自身。您沒有設置位置屬性的任何元素都是靜態的，這意味著您使用的大多數元素都是靜態定位的。 靜態定位元素不能應用 z-index、top、left、right 或 bottom 屬性。
相對位置 Relative Position
下一個最簡單的位置類型是相對位置。 相對位置元素的工作方式與靜態位置完全相同，但您現在可以為其添加 z-index、top、left、right 和 bottom 屬性。 如果您在不設置任何這些額外屬性的情況下使元素相對定位，您會注意到它看起來與靜態定位元素完全相同。 這是因為相對定位的元素也遵循正常的文檔流，但您可以使用 top、left、right 和 bottom 屬性來偏移它們。
設置偏移
從上面的示例中，您可以看到當沒有定義額外的屬性時，元素的工作方式與靜態一樣。 但是，一旦添加了 left 或 top 之類的屬性，您可以看到元素通過這些 top、left、right 和 bottom 屬性相對于其正常位置偏移了自身。 但是，您會注意到，這個偏移不會影響到其它元素。 這是因為所有其他元素都假定相對定位元素沒有偏移，并且它們根據相對定位元素在靜態時的位置來確定它們的位置。
現在，它自己的相對位置并沒有那么有用，因為您通常不想在不移動元素周圍的所有元素的情況下偏移元素。 位置相對的主要用例是設置元素的 z-index，或者用作絕對定位元素的容器，我們將在下面討論。
絕對定位 Absolute Position
絕對位置是從正常文檔流中完全移除元素的第一個位置。 如果你給一個元素絕對位置，所有其他元素都會表現得好像絕對定位的元素甚至不存在一樣。
可以看到，元素二和三的布局就好像元素一從未存在過一樣。 您還會注意到第一個元素不再填滿整個寬度。 這是因為絕對定位元素的寬度默認為自動，而不是像 div 那樣全寬。 此外，默認情況下，絕對定位元素會將自身放置在文檔中，如果它是靜態元素，它通常會呈現，但我們可以使用 top、left、right 和 bottom 屬性來更改它。
現在您可以看到我們的元素已移動到灰色邊框的左上角。 我使用這個灰色邊框來表示整個屏幕，因為默認情況下，絕對位置元素將相對于Body定位自身，因此頂部和左側為 0 表示該元素將出現在body的左上角。 您可以通過將其父元素之一的位置設置為靜態以外的任何值來更改絕對定位元素所在的元素。 這是使用相對位置最常見的地方之一。
通過將灰色父元素設置為相對位置，絕對定位的子元素位于父元素的左上角而不是Body。 這種相對位置和絕對位置的組合使用非常普遍。
固定位置 Fixed Position
現在我們來到一個較少使用的位置，即固定位置。 固定位置有點像絕對位置，因為它從文檔流中刪除元素，但固定位置元素總是相對于屏幕定位，無論其父元素在什么位置。
如您所見，我們的一個元素固定在頁面的左上角。 您還會注意到，當您滾動頁面時，無論您滾動到哪里，它都會停留在頁面的左上角。 這是固定和絕對之間的主要區別。
粘性位置 Sticky Position
最后一個是較新的粘性位置。 這個位置是固定位置和靜態位置的結合，并結合了兩者的優點。 位置為粘性的元素將充當靜態定位元素，直到頁面滾動到該元素碰到指定的頂部、左側、右側或底部值的點。 然后它將像一個固定位置的元素一樣，隨著頁面滾動，直到元素到達其容器的末尾。
首先，您會注意到一個元素在文檔流中處于其正常位置，就好像它是靜態的一樣。 一旦將頁面滾動到一個元素的頂部距離頁面頂部 10px 的位置，它就會像位置固定一樣粘在頁面頂部。 這將一直持續到元素到達紫色父容器的底部，在這種情況下它將停止與頁面一起滾動。
粘性位置是隨頁面滾動的導航欄、長列表中的標題以及許多其他用例的完美位置。
One More Thing about Absolute/Fixed Position
現在，您需要了解關于固定和絕對位置元素的一件事，因為它可能會導致一些奇怪的、難以發現的錯誤。 絕對定位的元素將使用第一個具有非靜態位置(非static)的父元素作為其容器來偏移自己，如果沒有父元素具有靜態以外的位置值，它將默認為Body。 我們已經知道了，但這并不是定義父容器的唯一方法。 絕對定位元素還將檢查設置了transform, filter, or perspective屬性的父級。 如果在父級上找到其中任何一個，它將使用該父級作為容器。
在上面的例子中，我們的灰色父元素是一個靜態位置，但由于它有一個transform屬性，所以它將充當我們絕對定位子元素的容器。綠色盒子將它視為定位的父容器。
最后：
希望大家都可以掌握這些定位方式，避免在開發中踩到坑！感謝閱讀！
例
定位<h2>元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
屬性定義及使用說明
position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。
| 默認值： | static |
|---|---|
| 繼承： | no |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.position="absolute" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
屬性值
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。 |
| relative | 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
| static | 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
SS所提供的Position定位屬性在進行網頁頁面布局過程中非常重要，通過使用Position定位屬性可以實現對頁面元素進行精確定位，最終達到較好的設計及頁面展示效果。本文主要針對Position屬性設計教學案例，實現教學。
CSS學習教程
Position定位屬性為設計人員提供5類定位模式，分別為static靜態定位、relative相對定位、absolute絕對定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對定位、絕對定位與固定定位三種模式。
以上給出了position屬性常用的定位方式，在實際進行頁面設計及元素布局過程中可以使用以上屬性實現元素的精確定位。
為演示定位屬性使用，本文設計制作上海世界技能大賽選手證，要求學生使用HTML進行選手證的設計及編碼實現。要求：
本例設計要求如上所示，設計實現參考效果如下所示：
參賽證設計樣式
參賽證設計樣式描述如上圖所示，基本元素來自世界技能大賽上海網站，主要logo包含上海世賽標識LOGO、選手照片與選手信息。所需素材如下：
案例所需素材
本例實現代碼如下所示：
CSS樣式文件
頁面body部分
本例實現代碼如上所示，其中CSS樣式部分用于實現div布局樣式，頁面body部分為頁面呈現內容。本例父元素使用relative屬性進行定位，所有子元素均以父元素為基礎使用absolute進行精確定位。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！如需完整案例代碼請關注并私信作者。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
