亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

通過(guò)案例理解position:relative和position:absolute

miqt / 3432人閱讀

摘要：并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。上面的案例中，將第二個(gè)子級(jí)元素?fù)Q為內(nèi)聯(lián)元素，子元素下的起點(diǎn)位置并沒(méi)有改變。

w3school過(guò)了HTML的知識(shí)之后，覺(jué)得要自己?jiǎn)渭兊厝タ兄R(shí)點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補(bǔ)上不懂的知識(shí)點(diǎn)。position:relative和postion:absolute困擾了我快一個(gè)星期之久，網(wǎng)上找到的資料魚(yú)龍混雜，剛確定“這樣”的理解之后，看另一份資料，發(fā)現(xiàn)“這樣”理解是錯(cuò)了，就這樣不斷更正，并記錄下來(lái)，最終整理出這份，以備參閱。

若有錯(cuò)誤，請(qǐng)指正。

下面的結(jié)果都是基于firefox38版本來(lái)測(cè)試的。

position:relative相對(duì)定位

1. 如何定位？
每個(gè)元素在頁(yè)面的普通流中會(huì)“占有”一個(gè)位置，這個(gè)位置可以理解為默認(rèn)值，而相對(duì)定位就是將元素偏離元素的默認(rèn)位置，但普通流中依然保持著原有的默認(rèn)位置。（在父級(jí)節(jié)點(diǎn)的content-box區(qū)定位，父級(jí)節(jié)點(diǎn)有文字的話，元素的默認(rèn)位置則是緊隨文字）
2. 不會(huì)改變行內(nèi)元素的display屬性。
3. 并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。
代碼——




  

  
position:relative定位測(cè)試

顯示——

給子元素one的style加上position:relative;后顯示——

給父級(jí)元素contain的style加上文字后顯示——

將one由div節(jié)點(diǎn)改為span節(jié)點(diǎn)，并加入文字“你好”之后顯示——



如果父級(jí)節(jié)點(diǎn)有文字的話...
  你好
  
position:relative定位測(cè)試

position:absolute絕對(duì)定位

1. 如何定位浮動(dòng)？

設(shè)置了TRBL
相對(duì)最近的設(shè)定了position:relative/absolute的父（祖先）節(jié)點(diǎn)的padding-box的區(qū)進(jìn)行定位（忽略文字），找不到符合條件的父（祖先）節(jié)點(diǎn)，則相對(duì)瀏覽器窗口進(jìn)行定位。

沒(méi)有設(shè)置了TRBL
則默認(rèn)浮動(dòng)，默認(rèn)浮動(dòng)在父級(jí)節(jié)點(diǎn)的content-box區(qū)。

2. 不管是塊級(jí)元素還是行內(nèi)元素，應(yīng)用了position:absolute之后，display為block：

可以設(shè)置width和height

沒(méi)有設(shè)置的話，width默認(rèn)為auto

3. 脫離文檔流，容器（父）元素將得不到脫離普通流的子元素高度

代碼——



祖先元素
  
父級(jí)元素
    
子元素

顯示——

給子元素的style加上position:absolute;top:0px;left:0px;后顯示——

給子元素的style加上position:absolute;top:0px;后顯示——

注釋：應(yīng)用了position:absolute之后之設(shè)置了top，所以子元素的top緊貼瀏覽器窗口的top（距離為0px），因?yàn)闆](méi)有設(shè)置left，所以子元素左邊就默認(rèn)父級(jí)元素content-box區(qū)的左側(cè)進(jìn)行定位（沒(méi)應(yīng)用position:absolute之前左側(cè)該在哪個(gè)位置就在那個(gè)位置）
給子元素的style加上position:absolute;后顯示——

案例：理解應(yīng)用了position:absolute的元素沒(méi)有設(shè)置TRBL的話，則默認(rèn)浮動(dòng)在父級(jí)節(jié)點(diǎn)的content-box區(qū)

用一句通俗易懂的話來(lái)說(shuō)就是，它該在哪個(gè)位置就在哪個(gè)位置，只不過(guò)不占位而已。
先理解下上面示例代碼的顯示圖，以及給自己元素加上position:absolute后的顯示圖。

給子元素的樣式加上：display:inline;我們看看如果子元素是內(nèi)聯(lián)元素的話會(huì)如何顯示。

假如有兩個(gè)同級(jí)塊級(jí)元素，看看第一個(gè)子元素和第二個(gè)子元素分別應(yīng)用position:absolute后的效果如何。

祖先元素
  
父級(jí)元素
      
子元素(上)

      
子元素(下)

如果這兩個(gè)同級(jí)塊級(jí)元素都應(yīng)用了position:absolute;這兩個(gè)元素會(huì)進(jìn)行重疊，子元素(下)顯示在前面，那是因?yàn)槟J(rèn)代碼靠后的元素的z-index比較大。

上面的案例中，將第二個(gè)子級(jí)元素?fù)Q為內(nèi)聯(lián)元素，子元素(下)的起點(diǎn)位置并沒(méi)有改變。

試試給代碼中的第一個(gè)元素的style加上display:inline;看看上面的子元素是內(nèi)聯(lián)元素的話會(huì)如何顯示。

祖先元素
  
父級(jí)元素
      
子元素(上)

      
子元素(下)

現(xiàn)在調(diào)換下應(yīng)用position:absolute的位置
代碼：

祖先元素
  
父級(jí)元素
      
子元素(上)

      
子元素(下)

第一個(gè)子元素是內(nèi)聯(lián)元素的話——

祖先元素
  
父級(jí)元素
      
子元素(上)

      
子元素(下)

綜上：不管是塊級(jí)元素還是內(nèi)聯(lián)元素應(yīng)用position:absolute并且不設(shè)置TRBL，它都會(huì)默認(rèn)在父級(jí)元素的content-box區(qū)浮動(dòng)。原來(lái)的起點(diǎn)位置也是應(yīng)用絕對(duì)定位后的起點(diǎn)位置，只不過(guò)如果應(yīng)用了position:absolute的內(nèi)聯(lián)元素左邊也有內(nèi)聯(lián)元素的話，它的起點(diǎn)位置會(huì)變得更靠前，直到緊挨左邊內(nèi)聯(lián)元素的邊界。

綜合案例：看看position:relative和position:absolute的綜合效果

沿用position:absolute的案例代碼——



祖先元素
  
父級(jí)元素
    
子元素

在上面代碼的基礎(chǔ)上分別應(yīng)用以下的定位后看看效果，并理解。

案例診斷：

給祖先div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

給父級(jí)div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

給祖先和父級(jí)div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

給祖先div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

給父級(jí)div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

給祖先和父級(jí)div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"

應(yīng)用：消除環(huán)繞浮動(dòng)元素的影響

父級(jí)，position:relative（不設(shè)TRBL）
子級(jí)，第一個(gè)div的float:left；第二個(gè)div的position:absolute（不設(shè)TRBL）
因?yàn)榈诙€(gè)子級(jí)div元素默認(rèn)會(huì)在父級(jí)元素的content-box區(qū)浮動(dòng)，它可以消除上一個(gè)同級(jí)子級(jí)div元素的環(huán)繞浮動(dòng)影響。
案例代碼——


  

  
position:absolute消除浮動(dòng)環(huán)繞的影響測(cè)試

顯示——

給父級(jí)元素加上position:relative，給第二個(gè)子級(jí)元素加上position:absolute后，顯示——

我們看到，確實(shí)是消除了環(huán)繞浮動(dòng)元素環(huán)繞的影響，position:absolute的優(yōu)先級(jí)高，所以float元素被遮住了，并不是消失了。另外看到contain元素的高度不受子元素的影響了，因?yàn)樗鼈兌济撾x文檔流了。

參考顏色

修改記錄

2016.12.23增補(bǔ)案例理解默認(rèn)浮動(dòng)

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

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

相關(guān)文章

  • 通過(guò)案例理解position:relative和position:absolute

    摘要：并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。上面的案例中，將第二個(gè)子級(jí)元素?fù)Q為內(nèi)聯(lián)元素，子元素下的起點(diǎn)位置并沒(méi)有改變。 w3school過(guò)了HTML的知識(shí)之后，覺(jué)得要自己?jiǎn)渭兊厝タ兄R(shí)點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補(bǔ)上不懂的知識(shí)點(diǎn)。position:relative和postion:absolute困擾了我快一個(gè)星期之久，網(wǎng)上找到的資料魚(yú)龍混雜，剛確定這樣的理解...

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

  • 詳解css相對(duì)定位和絕對(duì)定位

    摘要：以上兩點(diǎn)點(diǎn)可以總結(jié)出，相對(duì)定位總是以父級(jí)左上角為原點(diǎn)進(jìn)行定位的，如果父級(jí)不存在，則以瀏覽器左上角進(jìn)行定位。 贊助我以寫(xiě)出更好的文章，give me a cup of coffee? 2017最新最全前端面試題 案例代碼1 .rel{ border: 1px solid #ccc; height: 200px; ...

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

  • css定位案例探討（position屬性詳解）

    簡(jiǎn)述 定位問(wèn)題一直是新手學(xué)習(xí)css的一個(gè)難點(diǎn)，現(xiàn)在我將他們總結(jié)出來(lái)，希望對(duì)大家有幫助 position詳解 在css中，通過(guò)position屬性，配合top,right,left,buttom對(duì)元素進(jìn)行定位position屬性有：static，relative，absolute，fixed四種，下面分別探討 默認(rèn)定位static Document ...

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

  • 《CSS世界》筆記四：流的保護(hù)與破壞

    摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會(huì)詳細(xì)講解結(jié)界全稱為，中文為塊級(jí)格式化上下文。 上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對(duì)齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏 寫(xiě)在前面 原本博客名為浮動(dòng)與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動(dòng)定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

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

  • CSS3 巧妙實(shí)現(xiàn)聊天氣泡

    摘要：想必大家都知道，這里不贅述，聊一聊其他實(shí)現(xiàn)方法。這里的三角形部分可以使用正方形代替，實(shí)現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一陣子敢玩的 Mobile 頁(yè)改版完成了，就之前的頁(yè)面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡(jiǎn)約...

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

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

0條評(píng)論

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