SS 中的 position 屬性只有幾個有效值，但這些值會導(dǎo)致無窮無盡的設(shè)計可能性，這使得學(xué)習(xí)定位相當(dāng)困難。 在本文中，我將分解每個位置值并解釋您需要了解的有關(guān)它們的所有信息。

靜態(tài)位置 Static Position

首先，我們將介紹您可能從未聽說過但一直使用的最簡單的位置值，那就是靜態(tài)位置。 static 是 position 屬性的默認(rèn)值，本質(zhì)上只是意味著元素將遵循正常的文檔流并根據(jù)標(biāo)準(zhǔn)定位規(guī)則定位自身。您沒有設(shè)置位置屬性的任何元素都是靜態(tài)的，這意味著您使用的大多數(shù)元素都是靜態(tài)定位的。 靜態(tài)定位元素不能應(yīng)用 z-index、top、left、right 或 bottom 屬性。

相對位置 Relative Position

下一個最簡單的位置類型是相對位置。 相對位置元素的工作方式與靜態(tài)位置完全相同，但您現(xiàn)在可以為其添加 z-index、top、left、right 和 bottom 屬性。 如果您在不設(shè)置任何這些額外屬性的情況下使元素相對定位，您會注意到它看起來與靜態(tài)定位元素完全相同。 這是因為相對定位的元素也遵循正常的文檔流，但您可以使用 top、left、right 和 bottom 屬性來偏移它們。

從上面的示例中，您可以看到當(dāng)沒有定義額外的屬性時，元素的工作方式與靜態(tài)一樣。 但是，一旦添加了 left 或 top 之類的屬性，您可以看到元素通過這些 top、left、right 和 bottom 屬性相對于其正常位置偏移了自身。 但是，您會注意到，這個偏移不會影響到其它元素。 這是因為所有其他元素都假定相對定位元素沒有偏移，并且它們根據(jù)相對定位元素在靜態(tài)時的位置來確定它們的位置。

現(xiàn)在，它自己的相對位置并沒有那么有用，因為您通常不想在不移動元素周圍的所有元素的情況下偏移元素。 位置相對的主要用例是設(shè)置元素的 z-index，或者用作絕對定位元素的容器，我們將在下面討論。

絕對定位 Absolute Position

絕對位置是從正常文檔流中完全移除元素的第一個位置。 如果你給一個元素絕對位置，所有其他元素都會表現(xiàn)得好像絕對定位的元素甚至不存在一樣。

可以看到，元素二和三的布局就好像元素一從未存在過一樣。 您還會注意到第一個元素不再填滿整個寬度。 這是因為絕對定位元素的寬度默認(rèn)為自動，而不是像 div 那樣全寬。 此外，默認(rèn)情況下，絕對定位元素會將自身放置在文檔中，如果它是靜態(tài)元素，它通常會呈現(xiàn)，但我們可以使用 top、left、right 和 bottom 屬性來更改它。

現(xiàn)在您可以看到我們的元素已移動到灰色邊框的左上角。 我使用這個灰色邊框來表示整個屏幕，因為默認(rèn)情況下，絕對位置元素將相對于Body定位自身，因此頂部和左側(cè)為 0 表示該元素將出現(xiàn)在body的左上角。 您可以通過將其父元素之一的位置設(shè)置為靜態(tài)以外的任何值來更改絕對定位元素所在的元素。 這是使用相對位置最常見的地方之一。

通過將灰色父元素設(shè)置為相對位置，絕對定位的子元素位于父元素的左上角而不是Body。 這種相對位置和絕對位置的組合使用非常普遍。

固定位置 Fixed Position

現(xiàn)在我們來到一個較少使用的位置，即固定位置。 固定位置有點像絕對位置，因為它從文檔流中刪除元素，但固定位置元素總是相對于屏幕定位，無論其父元素在什么位置。

如您所見，我們的一個元素固定在頁面的左上角。 您還會注意到，當(dāng)您滾動頁面時，無論您滾動到哪里，它都會停留在頁面的左上角。 這是固定和絕對之間的主要區(qū)別。

粘性位置 Sticky Position

最后一個是較新的粘性位置。 這個位置是固定位置和靜態(tài)位置的結(jié)合，并結(jié)合了兩者的優(yōu)點。 位置為粘性的元素將充當(dāng)靜態(tài)定位元素，直到頁面滾動到該元素碰到指定的頂部、左側(cè)、右側(cè)或底部值的點。 然后它將像一個固定位置的元素一樣，隨著頁面滾動，直到元素到達(dá)其容器的末尾。

首先，您會注意到一個元素在文檔流中處于其正常位置，就好像它是靜態(tài)的一樣。 一旦將頁面滾動到一個元素的頂部距離頁面頂部 10px 的位置，它就會像位置固定一樣粘在頁面頂部。 這將一直持續(xù)到元素到達(dá)紫色父容器的底部，在這種情況下它將停止與頁面一起滾動。

粘性位置是隨頁面滾動的導(dǎo)航欄、長列表中的標(biāo)題以及許多其他用例的完美位置。

One More Thing about Absolute/Fixed Position

現(xiàn)在，您需要了解關(guān)于固定和絕對位置元素的一件事，因為它可能會導(dǎo)致一些奇怪的、難以發(fā)現(xiàn)的錯誤。 絕對定位的元素將使用第一個具有非靜態(tài)位置(非static)的父元素作為其容器來偏移自己，如果沒有父元素具有靜態(tài)以外的位置值，它將默認(rèn)為Body。 我們已經(jīng)知道了，但這并不是定義父容器的唯一方法。 絕對定位元素還將檢查設(shè)置了transform, filter, or perspective屬性的父級。 如果在父級上找到其中任何一個，它將使用該父級作為容器。

在上面的例子中，我們的灰色父元素是一個靜態(tài)位置，但由于它有一個transform屬性，所以它將充當(dāng)我們絕對定位子元素的容器。綠色盒子將它視為定位的父容器。

最后：

希望大家都可以掌握這些定位方式，避免在開發(fā)中踩到坑！感謝閱讀！

SS所提供的Position定位屬性在進(jìn)行網(wǎng)頁頁面布局過程中非常重要，通過使用Position定位屬性可以實現(xiàn)對頁面元素進(jìn)行精確定位，最終達(dá)到較好的設(shè)計及頁面展示效果。本文主要針對Position屬性設(shè)計教學(xué)案例，實現(xiàn)教學(xué)。

Position定位屬性

Position定位屬性為設(shè)計人員提供5類定位模式，分別為static靜態(tài)定位、relative相對定位、absolute絕對定位、fixed固定定位及sticky磁鐵定位模型。其中較常使用的是相對定位、絕對定位與固定定位三種模式。

1. static靜態(tài)定位：該定位模式為HTML元素默認(rèn)定位形式，各類元素按照文檔流對象模型正常排列。使用static定位是，top，left，right，bottom屬性無效。
2. relative相對定位：該定位模式是指相對自身位置定位（可以理解為相對默認(rèn)位置進(jìn)行定位），通過使用top，left，right，bottom屬性實現(xiàn)偏移，該定位模式不會影響正常文檔流，即其他元素位置相對默認(rèn)位置不變。在DIV嵌套時可以對父層使用該屬性為子層絕對定位提供祖先。
3. absolute絕對值定位：該定位形式將其最近定位的元素確定為祖先元素，參照祖先元素位置實現(xiàn)定位。如果祖先元素沒有任何定位的話，則以body為祖先元素進(jìn)行定位。該定位模式將使得被定位元素脫離文檔流。即不保留默認(rèn)情況下該元素位置。
4. fixed固定值定位：該定位模式相對于視口進(jìn)行定位，定位元素不會隨著滾動條的滾動而滾動。與absolute定位的最大區(qū)別在于absolute是相對body內(nèi)容區(qū)域進(jìn)行的定位，會隨著滾動條滾動而滾動。

以上給出了position屬性常用的定位方式，在實際進(jìn)行頁面設(shè)計及元素布局過程中可以使用以上屬性實現(xiàn)元素的精確定位。

定位實例

為演示定位屬性使用，本文設(shè)計制作上海世界技能大賽選手證，要求學(xué)生使用HTML進(jìn)行選手證的設(shè)計及編碼實現(xiàn)。要求：

1. 選手證需要包含四個DIV層，分別用于表示背景框架層、頂部Logo層、選手照片層及選手信息層；
2. 使用定位屬性實現(xiàn)各層的精確定位；

本例設(shè)計要求如上所示，設(shè)計實現(xiàn)參考效果如下所示：

參賽證設(shè)計樣式描述如上圖所示，基本元素來自世界技能大賽上海網(wǎng)站，主要logo包含上海世賽標(biāo)識LOGO、選手照片與選手信息。所需素材如下：

實現(xiàn)代碼

本例實現(xiàn)代碼如下所示：

本例實現(xiàn)代碼如上所示，其中CSS樣式部分用于實現(xiàn)div布局樣式，頁面body部分為頁面呈現(xiàn)內(nèi)容。本例父元素使用relative屬性進(jìn)行定位，所有子元素均以父元素為基礎(chǔ)使用absolute進(jìn)行精確定位。

本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復(fù)。更多程序設(shè)計相關(guān)教程及實例分享，期待大家關(guān)注與閱讀！如需完整案例代碼請關(guān)注并私信作者。