position 种类以及对应效果和用法

position 属性

position 表示网页中元素的定位方式，一共有 5 种：

• static: 默认值
• relative： 相对定位
• absolute： 绝对定位
• fixed： 固定定位
• sticky：粘性定位

position:static

static是position属性的默认值。如果不设置，则默认为static定位。页面为正常页面流(normal flow)。块级元素从上到下一次排列，元素与元素之间不产生重叠。

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

position:relative

• 相对定位的偏移参考元素是元素本身；
• 相对定位不会使元素脱离文档流，元素仍然要占据原来的位置；
• 相对定位元素常常作为绝对定位元素的父元素，定位元素经常与z-index属性进行层次分级；
• 必须搭配top、bottom、left、right这四个属性一起使用，指定偏移的方向和距离。

position：absolute

• 相对于已定位的最近的祖先元素；如果没有，它的位置是相对于最初的包含块（如body）
• 也必须搭配top、bottom、left、right这四个属性一起使用
• 绝对定位的元素会脱离普通流，它可以覆盖页面上其他元素；
• 可以通过设置z-index属性来控制这些框的堆放次序。

position：fixed

• 固定定位，相对于视口（viewport，浏览器窗口）进行偏移，定位是基于浏览器窗口；
• 常用于创建滚动屏幕时候仍然固定在相同位置的元素；
• 通过 top 或 bottom 和 left 或right 调整位置来实现固定元素的效果。

position：sticky

• 粘性定位，是一种“动态固定”的效果，类似于relative和fixed的结合；
• 一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）；
• 生效的前提是，必须搭配top、bottom、left、right 这四个属性一起使用，不能省略。