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

资源

在线测试

源代码