資訊專欄INFORMATION COLUMN
摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。
理論上來說，全部 position 的取值有8個
包括：position：static | relative | absolute | fixed | sticky | initial | inherit | unset
其中最常用的是 static 、relative、absolute、fixed 和 sticky
initial、inherit、unset 是css的關鍵字，任何css屬性的取值都可以設置這幾個值
position: static
默認值，在正常流中，對設置的 top 、left、right、bottom、z-index 一應忽略
position: relative
相對定位，相對于自己原來的位置偏移，（例：top: 10px; // 移動后元素頂部位于原位置頂部下10px;）
脫離文檔流，但在文檔流中保留原位置的空間（預留空間），
也就是說，元素原來位置會一直保留空白占位，相鄰兄弟元素會保持原來的位置，不會隨元素的移動而改變
注意：position: relative 對 table-*-group，table-row，table-column，table-cell，table-caption 元素無效。
栗子：
position: absolute
絕對定位，若祖先元素有設置 position: static 以外的屬性值，則相對該祖先元素絕對定位；否則，相對瀏覽器視口絕對定位
（在這里說一個注意點，大多數人認為是相對 html 或 body 元素絕對定位，這是個誤區；當頁面是可滾動的，就可以看出是相對瀏覽器窗口絕對定位的了，而不是整個 html 內容；這里我也懶得寫例子了，我就直接借鑒別人的吧：CSS進階——絕對定位元素的寬高是如何定義的）
因此，一般做法是將該絕對定位元素的父元素加上 position: relative 屬性
脫離文檔流，不預留空間，該元素下的兄弟元素位置上移
栗子：
但 position: absolute 并不僅有以上這個用途；
在按其內容大小調整尺寸的元素（例如 height 和 width 被設定為 auto，又或者行內元素），若該元素被絕對定位 position: absulute ，則可以通過指定 top / bottom / left / right , 保留 height 未指定（即 auto）, 來填充可用的垂直（水平）空間
什么意思呢？淡定，來吃些栗子吧：
（除此之外，絕對定位的元素可以設置外邊距（margin），且不會與其他邊距合并，這個就不舉栗子了）
寫上面例子的時候還是有個疑問的：
既然絕對定位是脫離文檔流的，為什么行內元素絕對定位的時候，在不設置 left 值時，它的原點是位于原位置的原點的呢？而不是位于父元素的原點呢？
（找了許久沒找著原因，這個留著以后慢慢解答吧）
position: fixed
固定定位，相對瀏覽器窗口固定定位，不隨滾動條滾動，實現的樣本就是日常網頁中的廣告彈窗
脫離文檔流，fixed 屬性會創建新的層疊上下文。
注意：當該固定元素的祖先元素的 transform 屬性非 none 時，容器由瀏覽器窗口改為該祖先元素
position: sticky
粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。
這個閾值就是 top 、right 、bottom 、left 四種之一，必須設置了其中一個，才能讓粘性定位生效，否則一直表現為相對定位。
粘性定位除了以上條件之外，還有幾點需要注意，否則粘性定位會失效：
1. 父元素的內容需滾動查看，且不能有 overflow: hidden 、 overflow: auto 屬性
2. 父元素的高度不能低于粘性定位元素的高度
3. sticky 是容器相關的，只會在它所處的容器（父元素）里生效。
sticky 栗子：demo
粘性定位的兼容問題：
1. 需寫下兩條css語句：
position: sticky; 和 position: -webkit-sticky; /* Safari */
2. Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。
position: initial
initial 關鍵字用于設置CSS屬性為它的默認值（在這里也就是 position: static）
注： IE不支持該關鍵字
position: inherit
每個 CSS 屬性定義的概述都指出了這個屬性是默認繼承的 ("Inherited: Yes") 還是默認不繼承的 ("Inherited: no")。
關于 inherit 的妙用可以看看這里：談談一些有趣的CSS題目（四）– 從倒影說起，談談 CSS 繼承 inherit
position: unset
unset 關鍵字是 initial 和inherit 的組合:
1. 如果該屬性是默認繼承屬性，則該值等同于 inherit
2. 如果該屬性是非繼承屬性，則該值等同于 initial
unset 的一些妙用可參考：有趣的CSS題目（15）： 談談 CSS 關鍵字 initial、inherit 和 unset
至此，第一條博客總算是磕磕碰碰寫完了，雖然一直也有做筆記總結，但是寫出來還是覺得自己可能還有疏漏，寫博客不容易，堅持寫更是不容易了，由衷佩服那些讓我學到知識的博客大牛們！感恩~
本文參考：
1. 有趣的CSS題目（15）： 談談 CSS 關鍵字 initial、inherit 和 unset
2. 談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit
3. CSS進階——絕對定位元素的寬高是如何定義的
4. MDN position屬性
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1973.html
摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...
摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...
摘要：為屬性的默認值，元素會遵循正常的文檔流，且會忽略等屬性。粘性定位常用于定位字母列表的頭部元素。須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： 1. position: static2. position: inherit3. position: relative4. ...
摘要：塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。相對定位，相對于自己的初始位置，不脫離文檔流。 有過css開發經驗的同學，對于position這個屬性一定不會陌生，然而這個熟悉的屬性確是面試題中的常客，也就說明了該屬性在css的世界是有一定的江湖地位的，那么我們就來詳細的說說position這個屬性。 在w3school中是這樣解釋posi...
摘要：定位屬性表示設置定位絕對定位固定定位相對定位絕對定位表示設置絕對定位絕對定位的注意設置絕對定位后，當前元素脫離文檔流如果指定元素的父級元素是元素該元素就是相對于當前頁面的定位如果指定元素的父級元素不是元素，父級元素沒有開啟定位該元素就 定位 position屬性 表示設置定位 絕對定位 固定定位 相對定位 絕對定位 position : absolute - 表示設置絕對定位...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
