css定位的区别

Position：是指定一个元素在文档中的定位方式，主要解决叠加排列的问题。

下面就来看看分别都有哪些定位方式，如何定位以及区别。

1.relative相对定位： 相对定位顾名思义就是相对于元素本来的位置去进行偏移。
特点：
(1)如果没定义偏移的量的话，对元素本身没有任何影响。
(2)不会脱离文档流，就算移动了，原来的位置还是会被保留。
(3)不会影响到其他元素的布局。
(4)具体是用 left top right bottom 这几个方向去设定的。 例如：left：10px；top：10px；就是相对于元素当前位置向右向下都移动10个像素，其实可以理解为远离左边往右走，远离上边往下走。负数的话就方向相反了。

2.absolute绝对定位：
特点:
(1)元素使用了绝对定位后不占据原来的位置，也就是脱离文档流
(2)元素使用绝对定位，位置是从浏览器出发。
(3)嵌套的盒子，祖先元素没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
(4)嵌套的盒子，祖先元素使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
(5)可以使块元素默认宽是根据内容决定（让块元素具备内联的特性）
(6)可以使内联元素支持宽高（让内联具备块的特性）
这里需要特别注意的是如果有多个祖先元素都有定位模式，那么就是以最近的祖先元素进行偏移。
子绝父相（通常给一个元素绝对定位时都会给父元素一个相对定位，因为不给偏移值所以对父元素没有影响）

3.fixed固定定位：
特点：
(1)以整个文档进行偏移，不受父元素和滚动条的影响，直接定位在那里。
(2)既然不受父元素影响那么肯定也是脱离了文档流。
(3)使元素具备了内联块的特点（使内联元素可以定义宽高，块元素默认宽高以内容决定）

4.sticky（黏性定位）
特点： 给元素指定一个位置，移动滚动条，当元素到达位置后就会一直在那里，不在动了。当然没有移动到指定位置时是不会有定位效果的。

例如: { position：sticky；top：100px；}就表示当前元素随着滚动条的滑动，移动到距离浏览器上边100个像素的位置停下不动了。

5.static（静态定位）
就相当于文档流，是默认值。

在前端布局里定位的使用是非常方便的，但是一定要弄清楚定位的区别和特点。

来自逆战班的一员！