css属性position: static|relative|absolute|fixed|sticky简单解析

时间：2022-02-02 10:38:17

CSS position属性规定一个元素在文档中的定位类型。top,right,bottom和left属性则决定了该元素的最终位置。

Object.style.position = static | relative | absolute | fixed | sticky

先解释下什么是文档流：

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流

static 静态定位（默认）

默认值，元素出现在正常的流中。位置设置为static的元素，它始终处于正常文档流给予的位置，不影响其他元素的偏移。（static 元素会忽略任何 top、bottom、left 、 right 或者 z-index 声明）。

relative 相对定位

位置设置为 relative 的元素，相对于其正常位置进行定位，该元素会在正常文档流中会占据位置，从而不影响其他元素的偏移。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。因此 "left:20px" 会将元素移至元素正常位置左边 20 个像素的位置。

我们用个简单例子分析

正常文档流

<div style="width: 200px; height:200px; background-color:green;">

  <div style="width: 100px; height:100px;background-color: #cff;">

    1

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    2

  </div>

</div>

css属性position: static|relative|absolute|fixed|sticky简单解析

加了relative之后的布局

<div style="width: 200px; height:200px; background-color:green;">

  <div style="width: 100px; height:100px;background-color: #cff; position: relative;top: 10px;left:10px;">

    1

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    2

  </div>

</div>

css属性position: static|relative|absolute|fixed|sticky简单解析

加上margin/padding/border之后的布局

记住一点，relative是相对自身定位。加上margin/padding/border之后，是在这些属性起作用之后，再来计算relative。

<div style="width: 200px; height:200px; background-color:green;">

  <div style="width: 100px; height:100px;background-color: #cff; margin: 10px; padding: 10px; border: 10px solid red;  position: relative;top: 10px;left:10px;">

    1

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    2

  </div>

</div>

加上margin/padding/border之后图对比：

css属性position: static|relative|absolute|fixed|sticky简单解析css属性position: static|relative|absolute|fixed|sticky简单解析

absolute 绝对定位

位置设置为 absolute 的元素，相对于非`static`定位以外的第一个父元素进行绝对定位，脱离了正常文档流，该元素不占据正常文档流空间，因此会影响其他元素的偏移。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。

我们用个简单例子分析

正常文档流

<div style="width: 200px; height:200px; background-color:green; position: relative;">

  <div style="width: 100px; height:100px;background-color: #cff;">

    1111111111

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    我是2,我在下面 .....我是2,。我在下面,会被覆盖？

  </div>

</div>

css属性position: static|relative|absolute|fixed|sticky简单解析

加了absolute之后的布局

设置为绝对定位之后，被定位的元素会以 “第一个设置了定位的祖先元素” 定位，这里就是第一个div元素。

<div style="width: 200px; height:200px; background-color:green; position: relative;">

  <div style="width: 100px; height:100px;background-color: #cff; position: absolute;top: 10px; left: 10px;">

    1111111111

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    我是2,我在下面 .....我是2,。我在下面,会被覆盖？

  </div>

</div>

css属性position: static|relative|absolute|fixed|sticky简单解析

加上margin/padding/border之后的布局

记住一点，absolute是相对第一个被定位的祖先元素。加上margin/padding/border之后，也是在这些属性起作用之后，再来计算absolute。

<div style="width: 200px; height:200px; background-color:green; position: relative;">

  <div style="width: 100px; height:100px;background-color: #cff;

  position: absolute;top: 10px; left: 10px;margin: 10px; padding: 10px;border: 10px solid red;">

    1111111111

  </div>

  <div style="width: 100px; height:100px; background-color: #ccf;">

    我是2,我在下面 .....我是2,。我在下面,会被覆盖？

  </div>

</div>

加上margin/padding/border之后，absolute定位的对比图：

css属性position: static|relative|absolute|fixed|sticky简单解析css属性position: static|relative|absolute|fixed|sticky简单解析

fixed 固定定位

位置被设置为 fixed 的元素，可相对于浏览器视口(viewport)进行定位。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式），低版本的IE不支持。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。`fixed`属性会创建新的层叠上下文。当元素祖先的`transform`属性非`none`时，容器由视口改为该祖先。

正常情况的定位，请看最后的例子。这里着重说下transform属性非none值时候，fixed的表现。transform属性向元素应用2D 或 3D 转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜。

  <div style="transform: rotate(10deg); width: 200px; height: 200px; border: 1px dotted red;">我定义transform属性

    <div style="position: fixed; left: 50px; bottom: 100px; border: 1px solid red; background-color: #ffc;">

      我是第二个fixed,我在哪里？我使用fixed定位

    </div>

  </div>

体现的布局:

css属性position: static|relative|absolute|fixed|sticky简单解析

从此图中，可以看出。fixed定位是相对于父元素有transform属性非none值来决定的。

sticky 粘性定位

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

注意的点

  1. 这里的几个属性，都可以理解为相对定位，只是参照物不一样。

    relative，参照物为自己。

    absolute，参照物为有定位(非static定位)的父元素。

    fixed, 参照物为浏览器的视口。

    sticky，参照物为浏览器视口。设置不同方向的值，会粘住于不同方向。
  2. 我们知道html和body元素相差有8px。relative和static方式在最外层时是以body标签为定位原点的，而absolute方式在无父级是position非static定位时是以html作为原点定位。
  3. sticky 粘性定位，须指定 top,right,bottom和left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
  4. 如果只设置position属性，覆盖程度：relative > fixed > absolute > sticky > static，relative会在最上面。(关于这一点，还是有点点疑惑的，为什么会这样，或者为什么不是这样）

此文档对应的例子

https://codepen.io/weiqinl/pen/BqeQoQ

里面有position各种属性的情况。

See the Pen css-position各种属性介绍 by weiqinl (@weiqinl) on CodePen.

## 参考资料
1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
2. http://www.w3school.com.cn/cssref/pr_class_position.asp

相关文章