#全面解析# js中 Position 关键字的 static、fixed、absolute、relative 四个属性值

1 static（静态定位）

static：默认值。没有定位，元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声明。

2 relative（相对定位）

relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以 “原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。总结一下就是，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

3 absolute（绝对定位）

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。但与relative的区别是其在正常流中的位置不再存在。
若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足以下两个条件：
　 1. 设定TRBL
　 2. 父级设定Position属性

4 fixed（固定定位）：

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。