CSS中的position属性是用来定义元素的定位方式（ static / relative / fixed / absolute / sticky ）。

Position 属性

position属性可定义元素的定位方式，该属性有5种取值，如下：

• static
• relative
• fixed
• absolute
• sticky

---

下面会用到，提前说一下。为了更精确的定位，left/right/top/bottom也都可以作为属性来进一步定义，但是如果想这些真正生效，就要保证position属性必须被先设置好了。否则就是扯淡！

---

position: static

HTML元素在默认情况下的定位属性的取值都是static这个值。

当position属性取值static时，left/right/top/bottom这些属性不会被支持的，设置了也白搭，static定位时不会考虑这些的。

static定位时，该元素不会有啥特殊的功效，根据页面的正常布局方式。

如下例所示：

div.static {
    position: static;
    border: 3px solid #46acb6;
}

运行一下

position: relative

当position属性取值relative时，则意味其定位方式是相对定位，相对于普通定位（static定位的原有位置）而言，此时left/right/top/bottom属性就会生效，如下所示：

源码如下所示：

div.relative {
    position: relative;
    left: 72px;
    border: 3px solid #46acb6;
}

运行一下

position: fixed

当position属性取值fixed时，则意味其定位方式是相对于视窗（viewport）的绝对定位（视窗就是浏览器窗口），此时left/right/top/bottom属性就会生效，如下所示：

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #46acb6;
}

运行一下

---

一些运营商的狗B黑产，还有一些以杀毒安全的名义暗地扶持流氓插件的浏览器，进行dns劫持后，在页面右下角弹出300*250px大小的垃圾广告的元素定位方式就是fixed；呵呵 ——_——|||

---

position: absolute

当元素positions属性取值为absolute时，即绝对定位。所谓绝对定位，类似fixed定位，但相对的不是视窗，而是相对于离该元素最近的已定位元素（只要不是static定位的都可以）。

案例源码如下：

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #46acb6;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #46acb6;
}

运行一下

position: sticky

当元素positions属性取值为sticky时，则会根据滚动条的位置，来切换relative和fixed的效果。具体如何，语言描述起来还是太没力气，直接看例子吧，自己去专否沙盒试试吧！（多试试，还算挺巧妙实用的）

案例源代码如下：

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  padding: 5px;
  background-color: #eef8f8;
  border: 2px solid #46acb6;
}

运行一下

图片上文字标注的定位

如下例所示，试试吧，把position属性活学活用吧：

左上角： 运行一下

右上角： 运行一下

左下角： 运行一下

右下角： 运行一下

正中间： 运行一下