成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

你真的認(rèn)識(shí)css里面的position么？！

CntChen / 3427人閱讀

摘要：不給元素保留空間，相反，元素定位的位置是相對(duì)它最近的非定位的祖先元素來(lái)確定的。絕對(duì)定位的元素可以設(shè)置外邊距，并且不會(huì)與其他邊距合并。能看我的文章到這里的同學(xué)都辛苦了，畢竟知道自己文章一向不通順，不過(guò)我會(huì)慢慢提高的，哈哈哈。

開(kāi)門見(jiàn)山，第一篇文章我們來(lái)說(shuō)說(shuō)css里面最常用的position屬性
緣由一次筆者面試，被問(wèn)及了下面的代碼，面試官讓我畫(huà)出這5個(gè)div的位置，自以為對(duì)css胸有成竹的我看到正確答案的那一刻也是吃驚不少，于是回家翻閱文檔，想看看relative到底是相對(duì)什么定位，absolute到底是怎么絕對(duì)定位。
看代碼：



    
1

    
2

    
3

    
4

    
5

大家有個(gè)大概的印象，先不急著說(shuō)答案，我們從MDN上面的關(guān)于absolute和relative的概念說(shuō)起（本文不對(duì)fixed做重點(diǎn)）

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：
這個(gè)關(guān)鍵字展示元素就好像沒(méi)被定位過(guò)一樣，在不改變布局的前提下調(diào)整元素位置（因此會(huì)在該元素本來(lái)的位置留下一個(gè)空白）。position:relative對(duì)table-*-group,table-row, table-column, table-cell, table-caption無(wú)效。

absolute：
不給元素保留空間，相反，元素定位的位置是相對(duì)它最近的非static定位的祖先元素來(lái)確定的。絕對(duì)定位的元素可以設(shè)置外邊距，并且不會(huì)與其他邊距合并。

（之所以沒(méi)用MDN中文版翻譯是覺(jué)得翻譯的不好，雖然我翻譯的也不咋地。。。）

換成我的理解：

relative定位之后不改變文檔流位置，保留其定位之前的文檔流位置

absolute改變文檔流，并且是相對(duì)于第一個(gè)被定位過(guò)的（非static）祖先元素定位，如果沒(méi)有就是根元素

相信大家對(duì)于absolute沒(méi)有什么異議，但是relative我相信很大一部分人沒(méi)有注意過(guò)“保留其定位之前的文檔流位置”這句話，這才是重點(diǎn)，看代碼來(lái)說(shuō)明



我是body


    我是wrapper
    
1111

    
2222

    
3333

結(jié)果見(jiàn)下圖：

好的，我們現(xiàn)在來(lái)分析一下：

div2不用說(shuō)，由于父元素wrap沒(méi)有進(jìn)行定位，因此他基于html來(lái)定位(注意不是body);
重點(diǎn)說(shuō)應(yīng)用了relative的div1和div3，可以明顯從圖中看到div1距離wrap的left和top根本不一樣啊，什么鬼啊，可是我們明明設(shè)置的都是30px啊，請(qǐng)大家想一下文檔中說(shuō)的那句話“保留其定位之前的文檔流位置”，那是不是可以理解成他是基于元素給定relative之前的文檔流位置定位的呢，下面我們就來(lái)檢驗(yàn)下看看是不是成立

我用ps做了一張圖，紅點(diǎn)是div1和div3原先的文檔流位置，綠點(diǎn)是他們應(yīng)用了relative之后的位置，這下是不是就對(duì)了，證明了我們之前的觀點(diǎn) -- relative是相對(duì)于自己的文檔流位置進(jìn)行定位

我在這里補(bǔ)充一句：可能有的同學(xué)會(huì)問(wèn)“當(dāng)div1進(jìn)行定位之后div3的文檔流位置會(huì)不會(huì)發(fā)生變化啊”，答案是不會(huì)，因?yàn)槲臋n里面說(shuō)進(jìn)行relative定位之后“without changing layout”，所以div1和div3的文檔流位置都不變。

看懂了上面內(nèi)容的同學(xué)現(xiàn)在可以試著做一下我開(kāi)篇的那個(gè)題目，看看到底有沒(méi)有理解position這個(gè)抬頭不見(jiàn)低頭見(jiàn)的css屬性

好了，第一篇文章就這么華麗的結(jié)束了，內(nèi)容比較簡(jiǎn)單，歡迎各路大牛給出指導(dǎo)意見(jiàn)。 能看我的文章BB到這里的同學(xué)都辛苦了，畢竟知道自己文章一向不通順，不過(guò)我會(huì)慢慢提高的，哈哈哈。

附上答案：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111592.html

相關(guān)文章

  • 你真的認(rèn)識(shí)css里面的position么？！

    摘要：不給元素保留空間，相反，元素定位的位置是相對(duì)它最近的非定位的祖先元素來(lái)確定的。絕對(duì)定位的元素可以設(shè)置外邊距，并且不會(huì)與其他邊距合并。能看我的文章到這里的同學(xué)都辛苦了，畢竟知道自己文章一向不通順，不過(guò)我會(huì)慢慢提高的，哈哈哈。 開(kāi)門見(jiàn)山，第一篇文章我們來(lái)說(shuō)說(shuō)css里面最常用的position屬性 緣由一次筆者面試，被問(wèn)及了下面的代碼，面試官讓我畫(huà)出這5個(gè)div的位置，自以為對(duì)css胸有成...

    荊兆峰 評(píng)論0 收藏0

  • CSS魔法堂：你真的理解z-index嗎？

    摘要：與的映射關(guān)系為。與根對(duì)應(yīng)的對(duì)應(yīng)的層疊上下文，是其他的祖先，的范圍覆蓋整條。注意的默認(rèn)值為，自動(dòng)賦值為。對(duì)于，它會(huì)將賦予給對(duì)應(yīng)的，而則不會(huì)。 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ?假如只是開(kāi)發(fā)簡(jiǎn)單的彈窗效果，懂得通過(guò)z-index來(lái)調(diào)整元素間的層疊關(guān)系就夠了。但要將多個(gè)彈窗間層疊關(guān)系給處理好，那么充分理解z-index背后的原理及兼容性問(wèn)題就是必要的知識(shí)...

    andycall 評(píng)論0 收藏0

  • React系列之一起認(rèn)識(shí)Render Prop

    摘要：比如有個(gè)組件，它用來(lái)實(shí)時(shí)的獲取鼠標(biāo)的位置。命名空間，多個(gè)修改同一個(gè)導(dǎo)致的命名沖突。據(jù)說(shuō)源碼里面為每個(gè)組件增加路由屬性就是通過(guò)該方法好了大功完成了，歡迎一起討論學(xué)習(xí)個(gè)人博客地址意卿 1.mixins 寫(xiě)過(guò)react項(xiàng)目的應(yīng)該都碰到過(guò)，不同組件復(fù)用相同代碼的問(wèn)題，在react早期使用React.createClass創(chuàng)建組件的時(shí)代，我們經(jīng)常使用的是mixins來(lái)實(shí)現(xiàn)代碼復(fù)用。比如有個(gè)組件A...

    LMou 評(píng)論0 收藏0

  • 前端實(shí)習(xí)面試匯總

    摘要：題目來(lái)源前端實(shí)習(xí)生面試總結(jié)最近開(kāi)始了幾次面試，雖然還不知道結(jié)果如何，但是還是要記錄下來(lái)進(jìn)行一個(gè)總結(jié)，同樣也希望對(duì)正在準(zhǔn)備面實(shí)習(xí)生的童鞋們有所幫助最后一個(gè)參數(shù)是做什么用的答規(guī)定事件是冒泡還是捕獲。 最近一直在多看基礎(chǔ)的書(shū)多碼代碼準(zhǔn)備找實(shí)習(xí)，在網(wǎng)上也搜羅了不少面經(jīng)，現(xiàn)在把搜羅到的實(shí)習(xí)生面試題自己整理一下。 題目來(lái)源：前端實(shí)習(xí)生面試總結(jié)最近開(kāi)始了幾次面試，雖然還不知道結(jié)果如何，但是還是要記錄...

    張利勇 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<