資訊專欄INFORMATION COLUMN
摘要：不給元素保留空間，相反，元素定位的位置是相對它最近的非定位的祖先元素來確定的。絕對定位的元素可以設置外邊距，并且不會與其他邊距合并。能看我的文章到這里的同學都辛苦了，畢竟知道自己文章一向不通順，不過我會慢慢提高的，哈哈哈。
開門見山，第一篇文章我們來說說css里面最常用的position屬性
緣由一次筆者面試，被問及了下面的代碼，面試官讓我畫出這5個div的位置，自以為對css胸有成竹的我看到正確答案的那一刻也是吃驚不少，于是回家翻閱文檔，想看看relative到底是相對什么定位，absolute到底是怎么絕對定位。
看代碼：
1
2
3
4
5
大家有個大概的印象，先不急著說答案，我們從MDN上面的關于absolute和relative的概念說起（本文不對fixed做重點）
relative:
This keyword lays out all elements as though the element were not positioned, and then adjust the element"s position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
筆者粗略翻譯一下：
reletive：
這個關鍵字展示元素就好像沒被定位過一樣，在不改變布局的前提下調整元素位置（因此會在該元素本來的位置留下一個空白）。position:relative對table-*-group,table-row, table-column, table-cell, table-caption無效。
absolute：
不給元素保留空間，相反，元素定位的位置是相對它最近的非static定位的祖先元素來確定的。絕對定位的元素可以設置外邊距，并且不會與其他邊距合并。
（之所以沒用MDN中文版翻譯是覺得翻譯的不好，雖然我翻譯的也不咋地。。。）
換成我的理解：
relative定位之后不改變文檔流位置，保留其定位之前的文檔流位置
absolute改變文檔流，并且是相對于第一個被定位過的（非static）祖先元素定位，如果沒有就是根元素
相信大家對于absolute沒有什么異議，但是relative我相信很大一部分人沒有注意過“保留其定位之前的文檔流位置”這句話，這才是重點，看代碼來說明
我是body我是wrapper111122223333
結果見下圖：
好的，我們現在來分析一下：
div2不用說，由于父元素wrap沒有進行定位，因此他基于html來定位(注意不是body);
重點說應用了relative的div1和div3，可以明顯從圖中看到div1距離wrap的left和top根本不一樣啊，什么鬼啊，可是我們明明設置的都是30px啊，請大家想一下文檔中說的那句話“保留其定位之前的文檔流位置”，那是不是可以理解成他是基于元素給定relative之前的文檔流位置定位的呢，下面我們就來檢驗下看看是不是成立
我用ps做了一張圖，紅點是div1和div3原先的文檔流位置，綠點是他們應用了relative之后的位置，這下是不是就對了，證明了我們之前的觀點 -- relative是相對于自己的文檔流位置進行定位
我在這里補充一句：可能有的同學會問“當div1進行定位之后div3的文檔流位置會不會發生變化啊”，答案是不會，因為文檔里面說進行relative定位之后“without changing layout”，所以div1和div3的文檔流位置都不變。
看懂了上面內容的同學現在可以試著做一下我開篇的那個題目，看看到底有沒有理解position這個抬頭不見低頭見的css屬性
好了，第一篇文章就這么華麗的結束了，內容比較簡單，歡迎各路大牛給出指導意見。 能看我的文章BB到這里的同學都辛苦了，畢竟知道自己文章一向不通順，不過我會慢慢提高的，哈哈哈。
附上答案：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111592.html
摘要：不給元素保留空間，相反，元素定位的位置是相對它最近的非定位的祖先元素來確定的。絕對定位的元素可以設置外邊距，并且不會與其他邊距合并。能看我的文章到這里的同學都辛苦了，畢竟知道自己文章一向不通順，不過我會慢慢提高的，哈哈哈。 開門見山，第一篇文章我們來說說css里面最常用的position屬性 緣由一次筆者面試，被問及了下面的代碼，面試官讓我畫出這5個div的位置，自以為對css胸有成...
摘要：與的映射關系為。與根對應的對應的層疊上下文，是其他的祖先，的范圍覆蓋整條。注意的默認值為，自動賦值為。對于，它會將賦予給對應的，而則不會。 一、前言 ?假如只是開發簡單的彈窗效果，懂得通過z-index來調整元素間的層疊關系就夠了。但要將多個彈窗間層疊關系給處理好，那么充分理解z-index背后的原理及兼容性問題就是必要的知識...
摘要：比如有個組件，它用來實時的獲取鼠標的位置。命名空間，多個修改同一個導致的命名沖突。據說源碼里面為每個組件增加路由屬性就是通過該方法好了大功完成了，歡迎一起討論學習個人博客地址意卿 1.mixins 寫過react項目的應該都碰到過，不同組件復用相同代碼的問題，在react早期使用React.createClass創建組件的時代，我們經常使用的是mixins來實現代碼復用。比如有個組件A...
閱讀 853·2021-11-24 09:38
閱讀 1085·2021-10-08 10:05
閱讀 2577·2021-09-10 11:21
閱讀 2800·2019-08-30 15:53
閱讀 1827·2019-08-30 15:52
閱讀 1964·2019-08-29 12:17
閱讀 3418·2019-08-29 11:21
閱讀 1609·2019-08-26 12:17
