css 迷惑的position

learn_shifeng 發布于2019-08-02 15:54 / 3295人閱讀

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

迷惑的position

小加發現實際開發中position使用頻率很高,但很多人卻對position不是很了解,導致開發中出現各種問題,現在讓我門一起來看看這個迷惑的position吧~

static

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

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

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

CSS

  .section--relative > .left-box {
    position: relative;
    left: 100px;
  }

效果圖

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

absolute

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

CSS

  .section--absolute > .left-box {
    position: absolute;
    top: 1150px;
  }

效果圖

由于查找left box的祖先元素中，未發現有設置非static的元素，其絕對定位是相對于根元素進行移動的。

relative和absolute對比 CSS

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

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

效果圖

由于其父元素設置了relative，此時該元素是相對于其父親進行定位的，而非根元素了～

我們再對比下relative和此時的效果圖，你會發現left box的實現效果一致，但是right box卻有一點不一樣。這是因為當元素設置relative時，其元素依然會占據所在普通流的的位置，而absolute會脫離普通文檔流，此時right box就往左邊布局了。

fixed

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

HTML

  
    
      fixed - 固定位置 - 相對瀏覽器窗口定位

CSS

  .section-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: #15FF44;
  }
  .section-fixed > p {
    margin: 0;
  }

效果圖

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

關鍵知識點



value
description



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


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


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


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


inherit
規定應該從父元素繼承 position 屬性的值。



w3school

value	description
static	默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
absolute	生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
inherit	規定應該從父元素繼承 position 屬性的值。

資源 在線測試 源代碼

云服務器 GPU云服務器 position，css position屬性，css 迷惑性 position()

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

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

css 迷惑的position

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

tianren124 2019-08-30 13:02 評論0 收藏0
CSS教你玩轉背景background-position（1）

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

tyheist 2019-08-02 15:57 評論0 收藏0
CSS教你玩轉背景background-position（1）

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

xiguadada 2019-08-22 10:53 評論0 收藏0
CSS教你玩轉背景background-position（1）

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

jay_tian 2019-08-29 13:09 評論0 收藏0
別再被各種單位迷惑：px/em/rem

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

teren 2019-08-28 18:26 評論0 收藏0