CSS属性 Position的几种定位方式

作者:WangMin

格言:努力做好自己喜欢的每一件事

在讲几种定位方式之前，我们先来了解一下什么是普通流(normal flow)？

除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

position 属性的作用

position 用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin 进行定位，这个时候我们就可以使用 position 定位来搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用 position 定位非常方便布局对象。

position 属性用来指定一个元素在网页上的位置，一共有5种定位方式，也就是说 position 属性主要有五个属性值。如下：

属性值	含义
static	默认值
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

元素可以使用的顶部（top），底部 (bottom)，左侧 (left)，右侧 (right)及 z-index 属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position:static

static 是 position 属性的默认值。如果省略 position属性，浏览器就认为该元素是 static定位。

这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right、 z-index这五个属性无效。

position:relative

相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。例子如下：

没有使用position:relative时:

<div class="box">
	<div class="same one"></div>
</div>

.box{
	width:200px;
	border:1px solid #ccc;
}
.box>.same{
	width:200px;
	height:200px;
	line-height: 50px;
	text-align: center;
	color: azure;
	margin-bottom: 20px;
}

.box>.one{
	background:#CCCCCC;
}

使用position:relative时:

.box>.one{
	background:#CCCCCC;
	position: relative;
	top: 10px;
	left:10px;
}

我们使用了 top:10px 和 left:10px 将 one元素进行了调整，通过上图就会发现这两个10px并不属于盒子模型，他只是用定位将 one元素进行了位置调整。上面代码中，div元素从默认位置向下偏移10px（即距离顶部10px），向右偏移10排序（即距离左边10px）。

position:absolute

它有一个重要的限制条件：相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。

绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

<div class="box">
	<div class="same one"></div>
	<div class="same two"></div>
	<div class="same three"></div>
</div>

.box{
	width:200px;
	border:1px solid #ccc;
}
.box>.same{
	width:200px;
	height:200px;
	line-height: 50px;
	text-align: center;
	color: azure;
	margin-bottom: 20px;
}

.box>.one{
	background:#CCCCCC;
}
.box>.two{
	background:pink;
}
.box>.three{
	background:burlywood;
}

正常文档流显示的效果：

未给父级元素 .box 添加相对定位，给 .two 元素设置绝对定位例子如下：

.box>.two{
	background:pink;
	position: absolute;
	top:20px;
	left:20px;
}

以上例子可以看出由于未给父级元素 .box 添加相对定位，给 .two 元素设置绝对定位，使的 .two 脱离了普通流，原来的位置没有保留，而且将 .one 覆盖，并对文档的根元素进行了绝对定位，定位于距离文档根元素顶部20px，左侧20px的位置。

给父级元素 .box 添加相对定位，然后再给 .two 元素设置绝对定位例子如下：

.box{
	width:200px;
	border:1px solid #ccc;
	position: relative;
}
.box>.two{
	background:pink;
	position: absolute;
	top:20px;
	left:20px;
}

以上例子可以看出 .two 元素相对于父元素 .box 进行了绝对定位，使的 .two 脱离了普通流，原来的位置没有保留，还将 .one 覆盖，并且 .two 元素定位于距离父元素 .box 顶部20px，左侧20px的位置。

从以上例子中可以得出一个结论，如果想要子元素定位于父元素的某个位置，必须给父元素设置一个相对定位 position:relative，才能使子元素出现在父元素的正确位置。

position：fixed

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 常用于创建在滚动屏幕时仍固定在相同位置的元素。如果想要某个元素固定在页面的某个位置不动的话，就个这个元素设置 position：fixed，并通过 top 或 bottom 和 left 或right 调整位置就能实现固定元素的效果。

position：sticky

sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和fixed 的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。

因此，它能够形成"动态固定"的效果。例子如下，初始加载时在自己的默认位置（relative定位）。

<div class="box box11">111111</div>
<div class="box box1 active">222222</div>
<div class="box box2">333333</div>
<div class="box box3">444444</div>
<div class="box box4">555555</div>
<div class="box box5">666666</div>

.box{
	width:50%;
	height:400px;
	color:#fff;
	margin-bottom: 20px;
}
.box11{
	background:#f00;
}
.box1{
	background:#000;
}
.box2{
	background:palegoldenrod;
}
.box3{
	background:peru;
}
.box4{
	background:blueviolet;
}
.box5{
	background:burlywood;
}
.active{
	position:sticky;
	top:0px;
}

页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。

等到页面重新向上滚动回到原位，工具栏也会回到默认位置。

sticky 生效的前提是，必须搭配top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效前提。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效前提，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回relative 定位。

sticky属性有以下几个特点：

1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

2、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果你设置了top: 20px，那么在sticky元素到达距离相对定位的元素顶部20px的位置时固定，不再向上移动。

3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于浏览器窗口来计算元素的偏移量。

position：sticky使用条件：

1. 父元素不能设置 overflow:hidden; 或者 overflow:auto;  属性；
2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；
3. 父元素的高度不能低于sticky 元素的高度；
4. sticky 元素仅在其父元素内生效；

position：sticky 这个属性的兼容性还不是很好，目前仍是一个试验性的属性，并不是W3C推荐的标准。具体情况可以如下图：

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!