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

資訊專欄INFORMATION COLUMN

css 迷惑的position

tianren124 / 1082人閱讀

摘要：相對于定位以外的第一個父元素進(jìn)行定位，即相對于第一個非處于正常流的父元素定位，現(xiàn)在我們將設(shè)置為，并且向下移動像素。生成相對定位的元素，相對于其正常位置進(jìn)行定位。元素的位置通過以及屬性進(jìn)行規(guī)定。規(guī)定應(yīng)該從父元素繼承屬性的值。

迷惑的position

小加發(fā)現(xiàn)實(shí)際開發(fā)中position使用頻率很高,但很多人卻對position不是很了解,導(dǎo)致開發(fā)中出現(xiàn)各種問題,現(xiàn)在讓我門一起來看看這個迷惑的position吧~

static

元素未定位，默認(rèn)出現(xiàn)在普通流中，即元素從左到右，從上到下的方式布局～

HTML 
  

    
Static - 普通流

    

      

        header box
      

      

        left box
      

      

        right box
      

      

        bottom box
CSS 
  .section {
    margin-bottom: 100px;
  }
  .section__boxes {
    font-size: 22px;
  }
  .header-box {
    background-color: #0981B2;
    height: 100px;
  }
  .left-box {
    background-color: #FF002D;
    height: 200px;
  }
  .right-box {
    background-color: #FFF419;
    height: 200px;
  }
  .bottom-box {
    background-color: #B037B2;
    height: 100px;
  }
效果圖

relative

相對于該元素所在普通流的位置進(jìn)行定位，現(xiàn)在我門讓left box相對于其位置向右邊移動100像素。

CSS 
  .section--relative > .left-box {
    position: relative;
    left: 100px;
  }
效果圖

對比static和relative兩個效果圖，你可以看到left box確實(shí)是相對于其所在正常流位置進(jìn)行定位，向右移動了100像素。

absolute

相對于static定位以外的第一個父元素進(jìn)行定位，即相對于第一個非處于正常流的父元素定位，現(xiàn)在我們將left box設(shè)置為absolute，并且向下移動1150像素。

CSS 
  .section--absolute > .left-box {
    position: absolute;
    top: 1150px;
  }
效果圖

由于查找left box的祖先元素中，未發(fā)現(xiàn)有設(shè)置非static的元素，其絕對定位是相對于根元素進(jìn)行移動的。

relative和absolute對比 CSS

我們設(shè)置其父親元素為relative，然后讓其元素向下、右各移動100像素。

  .section--absolute {
    position: relative;
  }
  .section--absolute > .left-box {
    position: absolute;
    top: 100px;
    left: 100px;
  }
效果圖

由于其父元素設(shè)置了relative，此時該元素是相對于其父親進(jìn)行定位的，而非根元素了～

我們再對比下relative和此時的效果圖，你會發(fā)現(xiàn)left box的實(shí)現(xiàn)效果一致，但是right box卻有一點(diǎn)不一樣。這是因?yàn)楫?dāng)元素設(shè)置relative時，其元素依然會占據(jù)所在普通流的的位置，而absolute會脫離普通文檔流，此時right box就往左邊布局了。

fixed

不管瀏覽器內(nèi)容怎么滾動等操作，都是相對于瀏覽器窗口進(jìn)行定位，即固定位置。我門將元素固定在瀏覽器的頂部。

HTML 
  

    

      
fixed - 固定位置 - 相對瀏覽器窗口定位
CSS 
  .section-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #15FF44;
  }
  .section-fixed > p {
    margin: 0;
  }
效果圖

你可以看到隨著瀏覽器滾動，其元素的位置依然在瀏覽器窗口的頂部，未發(fā)生任何變化。

關(guān)鍵知識點(diǎn) 



value
description





static
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。




relative
生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。




absolute
生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。




fixed
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。




inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。






w3school
資源 在線測試 源代碼

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

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

相關(guān)文章

  • css 迷惑的position

    摘要：相對于定位以外的第一個父元素進(jìn)行定位，即相對于第一個非處于正常流的父元素定位，現(xiàn)在我們將設(shè)置為，并且向下移動像素。生成相對定位的元素，相對于其正常位置進(jìn)行定位。元素的位置通過以及屬性進(jìn)行規(guī)定。規(guī)定應(yīng)該從父元素繼承屬性的值。 迷惑的position 小加發(fā)現(xiàn)實(shí)際開發(fā)中position使用頻率很高,但很多人卻對position不是很了解,導(dǎo)致開發(fā)中出現(xiàn)各種問題,現(xiàn)在讓我門一起來看看這個迷惑...

    learn_shifeng 評論0 收藏0

  • CSS教你玩轉(zhuǎn)背景background-position（1）

    摘要：在頁面構(gòu)建時，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我 在HTML頁面構(gòu)建時，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又...

    tyheist 評論0 收藏0

  • CSS教你玩轉(zhuǎn)背景background-position（1）

    摘要：在頁面構(gòu)建時，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我 在HTML頁面構(gòu)建時，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又...

    xiguadada 評論0 收藏0

  • CSS教你玩轉(zhuǎn)背景background-position（1）

    摘要：在頁面構(gòu)建時，剛?cè)腴T的前端小獅子們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又開始裝逼了首先決定背景圖的有如下屬性屬性主要控制背景圖片的大小，是非常直觀的一種控制方式，如上圖，我 在HTML頁面構(gòu)建時，剛?cè)腴T的前端小獅子?? 們經(jīng)常被背景圖的位置，尺寸所迷惑，怎樣才能更好的處理背景圖，讓背景圖達(dá)到你想要的效果呢，那么，退后，朕又...

    jay_tian 評論0 收藏0

  • 別再被各種單位迷惑：px/em/rem

    摘要：引自手冊是相對長度單位。所有未經(jīng)調(diào)整的瀏覽器都符合。特點(diǎn)是新增的一個相對單位，根，這個單位引起了廣泛關(guān)注。目前，除了及更早版本外，所有瀏覽器均已支持。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。 在他處看到一篇好文章，想記錄在自己的學(xué)習(xí)筆記中，原文作者看到我轉(zhuǎn)載若是介意，聯(lián)系我立馬就刪除，附上原文鏈接：http://www.huolg.net/html5/htm...

    teren 評論0 收藏0

發(fā)表評論

0條評論

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