定位在css中可謂是布局的常用手段，配合浮動能使網頁布局更加的靈活多變，今天跟大家一起分享下學習定位的一點小結
css中預設不開啟定位，其元素的position屬性預設值為static。若想要元素定位，則需手動開啟定位，即設定position的屬性值可選為：relative，absolute，fixed，sticky。
當元素position屬性值設定為relative時則開啟了相對定位，相對定位具有以下特點：
1 開啟該定位的元素不會脫離文件流，但是會比文件流高乙個層次；
2 元素的性質不會改變，即塊元素依然是塊元素，行內元素依然是行內元素。
3 定位的參照物是該元素在文件流的位置。
4 需要設定偏移量元素位置才能發生變化。
當元素position屬性值設定為absolute時則開啟了絕對定位，絕對定位具有以下特點：
1 開啟該定位的元素會脫離文件流，層級提公升。
2 元素的性質會發生改變，行內元素會變成塊元素。
3 定位的參照物是 該元素開啟了定位的相近的祖先元素，若祖先元素都沒開啟定位，則預設參照根元素（html）
4 需要設定偏移量元素位置才能發生變化。
當元素position屬性值設定為fixed時則開啟了固定定位，固定定位本質上也是絕對定位，唯一不同點在於：
固定定位的參照物是瀏覽器的視口窗，位置不會隨著網頁的滾動而滾動，一般這一特性會用在網頁中的廣告效果
當元素position屬性值設定為sticky時則開啟了粘滯定位，粘滯定位具有以下特點：
1 其相容性不是特別好，官方文件中ie並不支援
2 其特點和相對定位基本一致
3 粘滯定位可以在元素達到某個位置時將其固定住
一般來說在布局中常用的是相對定位和絕對定位，一些特殊場景會用到固定和粘滯定位
CSS之Position相對定位和絕對定位
absolute的英文意思是絕對的意思,實際上是針對父級元素元素定位,如果父級元素沒有position relative absolute,則追至再上乙個父級元素,直至相對於文件的左上角定位，按照我們中國人的理解觀念，這個其實是相對定位，是脫離文件流的。用了abolute屬性，原有float屬性將失...
CSS布局學習筆記之position
css知識點 之 position布局 其中有不少東西，來自原帖，我會在下面給出鏈結。使用position布局方式，可以分成三種，相對定位 也即position relative 絕對定位 postion absolute fixed 粘性定位 position sticky 等等。通常我們還會見到...
CSS 屬性之 position講解
postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值 position static position inherit position relative position absolute position fixed 依次講解這5個值的應用。position...