【css盒子定位】position屬性

今天是滿滿干貨,話不多說上知識

定位

定位（position）的基本思想很簡單，它允許用戶定義元素框相對于其正常位置應該出現的位置，這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素生成一個塊級框，而不論該元素是什么類型。position屬性可以選擇4種不同類型的定位模式。

position : static | relative | absolute | fixed

其中參數哈尼如下：

static：靜態設定為默認值。為特殊定位，對象遵循HTML定位規則。

relative: 生成相對定位的元素，相對于其正常位置進行定位。

absolute：生成絕對定位元素，元素位置通過left,top,right,bottom 屬性進行規定

fixed：生成固定定位，相對于瀏覽器窗口進行定位。元素的位置通過left,top.right,bottom 屬性進行規定

一，靜態定位

靜態定位是position 屬性的默認值，即該元素出現在文檔的常規位置，不會重新定位。通常此屬性可以不設置，除非是要覆蓋以前的定義

二，相對定位

相對定位（position:relative;）指的是通過設置水平垂直位置的值，讓這個元素“相對于”它原來的起點進行移動。

注： 即便是將某元素進行相對定位，并賦予新的位置值，元素仍然占據原來的空間位置，移動后會導致覆蓋其他元素。

三，絕對定位

用（position:absolute;）表示絕對定位，使用絕對定位的對象可以被放置在文檔任何位置，位置依據瀏覽器左上角的0點開始計算。絕對定位的對象可以層疊，層疊的順序由z-index控制，z-index值越高位置越靠上。

四，固定定位

固定定位（position:fixed;）其實是絕對定位定位的子類別，一個設置了position:fixed 的元素相對于視窗是固定的，就算頁面文檔發生了滾動，它也會一直待在相同的地方

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。