定位的方式


static:默認值,靜態定位,表示沒有定位,元素會按照正常的位置顯示,此時 top、bottom、left 和 right 4 個定位屬性也不會被應用。

relative:相對定位,即相對於元素的正常位置進行定位,您可以通過 top、right、bottom、left 這 4 個屬性來設置元素相對於正常位置的偏移量,在此過程中不會對其它元素造成影響。

absolute:絕對定位,相對於第一個非 static 定位的父級元素進行定位,可以通過 top、right、bottom、left 這 4 個屬性來設置元素相對於父級元素位置的偏移量。如果沒有滿足條件的父級元素,則會相對於瀏覽器窗口來進行定位。使用絕對定位的元素不會對其它元素造成影響。

fixed:固定定位,相對於瀏覽器的創建進行定位,可以使用 top、right、bottom、left 這 4 個屬性來定義元素相對於瀏覽器窗口的位置。使用固定定位的元素無論如何滾動瀏覽器窗口元素的位置都是固定不變的。

sticky:粘性定位,它是 relative 和 fixed 的結合體,能夠實線類似吸附的效果,當滾動頁面時它的效果與 relative 相同,當要滾動到屏幕之外時則會自動變成 fixed 的效果。

static 是 position 屬性的默認值,表示沒有定位,使用靜態定位的元素會按照元素正常的位置顯示,並且不會受到 top、bottom、left、right 和 z-index 屬性的影響。

相對定位就是元素相對於自己默認的位置來進行位置上的調整,可以通過 top、bottom、left 和 right 四個屬性的組合來設置元素相對於默認位置在不同方向上的偏移量。

絕對定位就是元素相對於第一個非靜態定位(static)的父級元素進行定位,如果找不到符合條件的父級元素則會相對與瀏覽器窗口來進行定位。您同樣可以使用 top、bottom、left 和 right 四個屬性來設置元素相對於父元素或瀏覽器窗口不同方向上的偏移量。

使用絕對定位的元素會脫離原來的位置,不再占用網頁上的空間。與相對定位相同,使用絕對定位的元素同樣會與頁面中的其它元素發聲重疊,另外使用絕對定位的元素可以有外邊距,並且外邊距不會與其它元素的外邊距發生重疊。

固定定位就是將元素相對於瀏覽器窗口進行定位,使用固定定位的元素不會因為瀏覽器窗口的滾動而移動,就像是固定在了頁面上一樣,我們經常在網頁上看到的返回頂部按鈕就是使用固定定位實現的。

粘性定位與前面介紹的四種定位方式不太一下,它像是相對定位和固定定位的結合體,當滾動頁面時它的效果與相對定位相同,當元素滾動到一定程度時它又會呈現出固定定位的效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM