css 迷惑的position

笑着哭i 提交于 2020-04-05 19:38:47

迷惑的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

资源

在线测试

源代码

本文转载于:css 迷惑的position

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!