css 迷惑的position

迷惑的position

小加發現實際開發中position使用頻率很高,但不少人卻對position不是很瞭解,致使開發中出現各類問題,如今讓我門一塊兒來看看這個迷惑的position吧~

static

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

HTML

<div class="section">
    <h3 class="section__title">Static - 普通流</h3>
    <div class="section__boxes row text-center">
      <div class="header-box col-xs-12">
        header box
      </div>
      <div class="left-box col-xs-4">
        left box
      </div>
      <div class="right-box col-xs-8">
        right box
      </div>
      <div class="bottom-box col-xs-12">
        bottom box
      </div>
    </div>
  </div>

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時，其元素依然會<mark>佔據所在普通流的的位置</mark>，而absolute會<mark>脫離普通文檔流</mark>，此時right box就往左邊佈局了。

fixed

無論瀏覽器內容怎麼滾動等操做，都是相對於瀏覽器窗口進行定位，即固定位置。我門將元素固定在瀏覽器的頂部。

HTML

<div class="section">
    <div class="section__boxes section-fixed row text-center">
      <p>fixed - 固定位置 - 相對瀏覽器窗口定位</p>
    </div>
  </div>

CSS

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

效果圖

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

關鍵知識點

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

w3school

資源

在線測試

源代碼