position的4个值和用法

1. position的4个值

我理解的四个值为

• absolute
• relative
• fixed
• sticky

2. 用法

2.1 absolute

position:absolute 绝对定位

TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)

• 如果元素没有设定TRBL并且父级没有设定position属性，那么当前设置absolute的元素默认依据父级的坐标原始点为原始点。
• 如果元素设定TRBL并且父级没有设定position属性，那么当前设置absolute的元素则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

看个🌰：

.parent{}

.child{
  position: absolute;
  top: 1px;
}

<div class="parent">我是parent
  <div class="child">我是child</div>
</div>

效果：

• 如果父级设定position:absolute属性，那么当前设置absolute的元素则以父元素为原始点进行定位，位置将由TRBL决定。

看个🌰：

.parent{
  position: absolute;
}

.child{
  position: absolute;
  top: 0px;
}

<div class="parent">我是parent
  <div class="child">我是child</div>
</div>

效果：

• 给父元素加上position:absolute，元素就脱离了文档流

关于文档流

文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

• 文档流是相对于盒子模型讲的。
• 文本流是相对于文子段落讲的。
• 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
• 但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。当然你可以使用 z-index 来让底部的元素到上面来，类似于一个图层的概念

知乎

看个🌰：

.parent{
    position: absolute;
}

.child{}

.normal{
    width: 100px;
    height: 100px;
    background:red;
}
</style>

<div class="parent">我是parent
  <div class="child">我是child</div>
</div>

<div class="normal">正常文档流</div>

效果：

可以看到class为parent的元素已经脱离了文档流，与正常文档流重叠。

如果，设定，太多了看的是不是很烦躁，还是画个表格吧。

x轴：父元素，y轴：子元素

x:父元素,y:子元素	position:absolute(脱离文档流)	无position:absolute
position:absolute	父级为原始点	子元素设定TRBL ? 浏览器左上角为原始点 : 父级为原始点
无position:absolute	设置TRBL无效	正常文档流

2.2 relative

position:relative 相对定位

当元素被设置相对定位后，将自动产生层叠，他的层叠级别自然的高于文档流，除非设置其z-index值为负值。并且参照元素的原位置进行移动，但是原位置仍然保留空间。

  <style>
    .box1,.box2{
      width: 200px;
      height: 100;
      padding: 20px 0;
    }

    .box1{
      background: yellow;
      position: relative;
      top: 20px;
    }

    .box2{
      background: red;
    }
  </style>

  <div class="box1">box1</div>
  <div class="box2">box2</div>

效果：

上面说的是单一的相对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对定位元素能保证相对于这个原坐标的相对位置。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。

2.3 fixed

position:fixed 固定定位

• 固定定位与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
• 元素会被移出正常文档流

2.4 sticky

position:sticky 粘性定位

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

什么是结合两种定位功能于一体呢？

元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

嗯，上面的文字描述估计还是很难理解,来个示例

按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。

而使用 position:sticky ，则可以非常方便的实现

<style>
  .container {
    background: #eee;
    width: 600px;
    height: 1000px;
    margin: 0 auto;
}

.sticky-box {
    position: -webkit-sticky;
    position: sticky;
    height: 60px;
    margin-bottom: 30px;
    background: #ff7300;
    top: 0px;
}

div {
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 60px;
}
</style>

<div class="container">
    <div class="sticky-box">内容1</div>
    <div class="sticky-box">内容2</div>
    <div class="sticky-box">内容3</div>
    <div class="sticky-box">内容4</div>
</div>

嗯，看看上面的 CSS 代码，只需要给每个内容区块加上

{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

生效规则
position:sticky 的生效是有一定的限制的，总结如下：

1. 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

   • 并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。

2. 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：

   • 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
   • 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

3. 达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

3. 参考文章：

使用 position:sticky 实现粘性布局
position属性absolute与relative 详解

如有不当，还请老哥指出。