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

資訊專欄INFORMATION COLUMN

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

miqt / 3361人閱讀

摘要：并沒有脫離普通流，只是視覺上發生的偏移。上面的案例中，將第二個子級元素換為內聯元素，子元素下的起點位置并沒有改變。

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

若有錯誤，請指正。

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

position:relative相對定位

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




  

  
position:relative定位測試

顯示——

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

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

將one由div節點改為span節點，并加入文字“你好”之后顯示——



如果父級節點有文字的話...
  你好
  
position:relative定位測試

position:absolute絕對定位

1. 如何定位浮動？

設置了TRBL
相對最近的設定了position:relative/absolute的父（祖先）節點的padding-box的區進行定位（忽略文字），找不到符合條件的父（祖先）節點，則相對瀏覽器窗口進行定位。

沒有設置了TRBL
則默認浮動，默認浮動在父級節點的content-box區。

2. 不管是塊級元素還是行內元素，應用了position:absolute之后，display為block：

可以設置width和height

沒有設置的話，width默認為auto

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

代碼——



祖先元素
  
父級元素
    
子元素

顯示——

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

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

注釋：應用了position:absolute之后之設置了top，所以子元素的top緊貼瀏覽器窗口的top（距離為0px），因為沒有設置left，所以子元素左邊就默認父級元素content-box區的左側進行定位（沒應用position:absolute之前左側該在哪個位置就在那個位置）
給子元素的style加上position:absolute;后顯示——

案例：理解應用了position:absolute的元素沒有設置TRBL的話，則默認浮動在父級節點的content-box區

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

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

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

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

      
子元素(下)

如果這兩個同級塊級元素都應用了position:absolute;這兩個元素會進行重疊，子元素(下)顯示在前面，那是因為默認代碼靠后的元素的z-index比較大。

上面的案例中，將第二個子級元素換為內聯元素，子元素(下)的起點位置并沒有改變。

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

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

      
子元素(下)

現在調換下應用position:absolute的位置
代碼：

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

      
子元素(下)

第一個子元素是內聯元素的話——

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

      
子元素(下)

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

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

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



祖先元素
  
父級元素
    
子元素

在上面代碼的基礎上分別應用以下的定位后看看效果，并理解。

案例診斷：

給祖先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;"

應用：消除環繞浮動元素的影響

父級，position:relative（不設TRBL）
子級，第一個div的float:left；第二個div的position:absolute（不設TRBL）
因為第二個子級div元素默認會在父級元素的content-box區浮動，它可以消除上一個同級子級div元素的環繞浮動影響。
案例代碼——


  

  
position:absolute消除浮動環繞的影響測試

顯示——

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

我們看到，確實是消除了環繞浮動元素環繞的影響，position:absolute的優先級高，所以float元素被遮住了，并不是消失了。另外看到contain元素的高度不受子元素的影響了，因為它們都脫離文檔流了。

參考顏色

修改記錄

2016.12.23增補案例理解默認浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111549.html

相關文章

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

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

    codergarden 評論0 收藏0

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

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

    Jaden 評論0 收藏0

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

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

    Half 評論0 收藏0

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

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

    he_xd 評論0 收藏0

  • CSS3 巧妙實現聊天氣泡

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

    bang590 評論0 收藏0

發表評論

0條評論

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