国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

通過案例理解position:relative和position:absolute

codergarden / 844人閱讀

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

w3school過了HTML的知識之后，覺得要自己單純地去啃知識點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補(bǔ)上不懂的知識點(diǎn)。position:relative和postion:absolute困擾了我快一個星期之久，網(wǎng)上找到的資料魚龍混雜，剛確定“這樣”的理解之后，看另一份資料，發(fā)現(xiàn)“這樣”理解是錯了，就這樣不斷更正，并記錄下來，最終整理出這份，以備參閱。

若有錯誤，請指正。

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

position:relative相對定位

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




  

  
position:relative定位測試

顯示——

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

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

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



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

position:absolute絕對定位

1. 如何定位浮動？

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

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

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

可以設(shè)置width和height

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

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

代碼——



祖先元素
  
父級元素
    
子元素

顯示——

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

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

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

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

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

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

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

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

      
子元素(下)

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

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

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

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

      
子元素(下)

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

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

      
子元素(下)

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

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

      
子元素(下)

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

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

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



祖先元素
  
父級元素
    
子元素

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

案例診斷：

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

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

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

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

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

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

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

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


  

  
position:absolute消除浮動環(huán)繞的影響測試

顯示——

給父級元素加上position:relative，給第二個子級元素加上position:absolute后，顯示——

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

參考顏色

修改記錄

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50081.html

相關(guān)文章

  • 通過案例理解position:relative和position:absolute

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

    miqt 評論0 收藏0

  • 詳解css相對定位和絕對定位

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

    Jaden 評論0 收藏0

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

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

    Half 評論0 收藏0

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

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

    he_xd 評論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 頁改版完成了，就之前的頁面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡約...

    bang590 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<