css 有三種基本的定位機制：普通流、浮動和絕對定位，但本篇文章要總結的是css中的position屬性，position有四個值，static,absolute,relative,fixed。
生成相對定位的元素，相對於其正常位置進行定位，它原本佔據的空間流仍然存在。當使用left、top、right、bottom偏移時起始計算點為外邊距最外層，偏移後的元素不佔據空間流，對後面的元素排版不受影響，但會覆蓋後面的元素。
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位，它原本佔據的空間流不存在了。這裡特別要注意的是決定定位是相對於誰進行定位的，如果絕對定位的元素父元素不是fixed，absolute，relative中任何一種，則不相對于父元素定位，而是繼續往上查詢，直到其中乙個父輩元素的position屬性不為static為止，如果沒找到，則相對於瀏覽器螢幕左上角定位，而不是相對於body或者html定位，那為什麼網上會有人說相對於body或者html定位呢，那是因為當left，right，top，bottom值不設定的時候，left和top會自動計算使其看起來像相對於body定位的，也就是不偏移了。比如給html和body設定margin:20px，那麼絕對定位的元素left和top自動計算為40px，如果設定絕對定位元素的left和top為0，則絕對定位元素就跑到螢幕左上角了。
如果絕對定位的父元素position屬性為relative，那麼就相對于父元素定位，父元素設定了margin和padding以及border屬性後，絕對定位是相對于父元素的內容+padding開始定位的，不包括margin和border。
生成絕對定位的元素，相對於瀏覽器視窗進行定位，固定定位是絕對定位的一種特殊定位，只不過相對於瀏覽器視窗定位而無論父元素是什麼定位。固定定位一般用於模態框和固定在螢幕右下角的返回頂部按鈕。
css定位總結
塊狀元素 display block可以作為其它元素的容器，排斥其它元素和他在一行 寬 width 高 height 值都是有作用的 內聯元素 內容屬性 內容本身的寬 width 內容本身的長 height margin 20px 0 0 2px 0表示不設定 因為瀏覽器的margin paddin...
CSS定位總結
定位相關總結 1 文件流 就是html的布局機制。塊元素 block 獨佔一行，內聯元素 line 不獨佔一行。2 相對定位 就是相對於乙個東西定位。這個東西就是它本身，同時可以使用left top bottom right 來移動元素的位置。注意 相對定位不會脫離文件流。3 絕對定位 找乙個東西相...
CSS定位總結
css定位屬性共有三種 1.相對定位 relative 2.絕對定位 adsolute 3.固定定位 fixed 相對定位 相對與自己原來的位置定位，進行位置的調整。一 1.盒子和盒子的距離，間隙。相對定位 位置的調整 2.margin會影響後面的元素。相對定位不會影響別人。不脫標。坑位還佔著，別人...