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

資訊專欄INFORMATION COLUMN

css 迷惑的position

learn_shifeng / 3302人閱讀

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

迷惑的position

小加發(fā)現(xiàn)實(shí)際開(kāi)發(fā)中position使用頻率很高,但很多人卻對(duì)position不是很了解,導(dǎo)致開(kāi)發(fā)中出現(xiàn)各種問(wèn)題,現(xiàn)在讓我門一起來(lái)看看這個(gè)迷惑的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

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

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

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

absolute

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

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

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

relative和absolute對(duì)比 CSS

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

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

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

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

fixed

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

HTML 
  

    

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

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

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



value
description





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




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




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




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




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






w3school
資源 在線測(cè)試 源代碼

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

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

相關(guān)文章

  • css 迷惑的position

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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