最近參加一次面試，由於沒有準備，被面試官虐慘了，不過這是好事，說明自己還有很多不足。進入正題：面試官問我position這塊的時候，我有點卡殼，乙個是關於fixed的相對定位和sticky粘性定位。下面有關position，我就做乙個全面的總結。
position設定的值有哪些：
1、static(預設值)
靜態定位
沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告），可以把已定位的元素取消定位 。
使用場景：某些特殊情況下，你想覆蓋原有的定位，就可以設定position:static 。
有10個 div, 想讓其中乙個不定位,其他九個全部絕對定位,這時就可以單獨為這個div設定static。
2、relative
相對定位
相對定位是相對於元素原來的位置進行定位準確的說是相對於原來的位置的左上角進行定位並且保持其未定位前的形狀，它原本所佔的空間仍保留。
3、absolute
絕對定位
元素會被移出正常文件流，並不為元素預留空間，通過指定元素相對於最近的非 static 定位祖先元素的偏移，來確定元素位置。它不會保留原來所佔據的空間
4、fixed
固定定位
元素會被移出正常文件流，並不為元素預留空間，而是通過指定元素相對於螢幕視口（viewport）的位置來指定元素位置。元素的位置在螢幕滾動時不會改變。列印時，元素會出現在的每頁的固定位置。fixed 屬性會建立新的層疊上下文。當元素祖先的 transform, perspective(定義 3d 元素距檢視的距離) 或 filter 屬性非 none 時，容器由視口改為該祖先。
注：viewport (視口)就是瀏覽器顯示頁面內容的螢幕區域
fixed的定位注意兩點：一是固定定位是相對於螢幕視口的位置二是如果當前元素的祖先的tranform(屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜) ，perspective(定義 3d 元素距檢視的距離) ，filter屬性(濾鏡)，容器由視口改為該祖先。
5、sticky
粘性定位
元素根據正常文件流進行定位，然後相對它的最近滾動祖先（nearest scrolling ancestor）和 containing block (最近塊級祖先 nearest block-level ancestor)，包括table-related元素，基於top, right, bottom, 和 left的值進行偏移。偏移值不會影響任何其他元素的位置。
該值總是建立乙個新的層疊上下文（stacking context）。注意，乙個sticky元素會「固定」在離它最近的乙個擁有「滾動機制」的祖先上（當該祖先的overflow 是 hidden, scroll, auto, 或 overlay時），即便這個祖先不是真的滾動祖先。這個阻止了所有「sticky」行為
元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那麼是相對於viewport來計算元素的偏移量
sticky的注意事項可以參考這篇文章–css中容易被忽視的 position屬性sticky
CSS居中那些事
做前端這一年多來，其實一直都是偏向於js前後端，css什麼的總是抱著夠用就好的心態，從來沒有系統的學習或總結過，結果現在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，於是簡單的總結一下，高手繞路。我們在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，...
css那些事（一）
一 內邊框padding和外邊框margin屬性縮寫 內外邊框有四個屬性 padding top,padding right,padding bottom,padding left margin top,margin right,margin bottom,margin left。將其簡寫，就是把四...
CSS 屬性之 position講解
postion 屬性定義了乙個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值 position static position inherit position relative position absolute position fixed 依次講解這5個值的應用。position...