CSS定位总结--static、relative、absolute、fixed
position属性值：static、relative、absolute、fixed
与position属性相关的属性，四个偏移属性为 top，right，bottom，left。还有一个层级属性z-index（z-index大的显示在前面）。
1、静态定位 static：
-
文档中正常盒子的默认定位，元素内定义的top, bottom, left, right 和 z-index无效。
-
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2、相对定位 relative：
-
盒子当前位置距盒子原来位置有一段偏移距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
-
使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的偏移属性进行位置的偏移，也可用层级属性。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
-
父元素的position值变化时，子元素（position=relative）的相对位置不随父元素的position值变化而变化。
3、绝对定位 absolute：
-
盒子脱离html文档，在文档流中不占空间，相对于某一个拥有（relative和absolute）的父盒子来定位，如果盒子的父元素都没有（relative和absolute），它相对于根元素html来定位,(必须写默认的left值和top值,否则它的位置还在原来的位置)
-
以最近的不是static定位的父级元素的左上位置作为参考进行定位，原本空间占据的位置将被关闭。如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。
-
可以使用top，bottom，left，right进行位置移动，亦可使用z-index在z轴上面进行移动。当元素为此定位时，如果该元素为内联元素，则会变为块级元素，即可以直接设置其宽和高的值；如果该元素为块级元素，则其宽度会由初始的100%变为auto。
【例如】
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
4、固定定位 fixed：
-
固定定位和绝对定位一样，是完全脱离文档流的，不同的是固定定位是相对于浏览器窗口，所以它不会随着页面而滚动。
5、其他属性：
-
overflow：设置当元素的内容溢出其区域时发生的事情
-
vertical-align：设置元素的垂直对齐方式
-
z-index：设置元素的堆叠顺序，高的在前面，仅在定位元素上奏效，可取负值
6、使用技巧：
1）当父级div是fixed固定布局时，要想内部元素保持位置不变，及内部元素设置absolute，那么可以在两者中间再加一层div，让其生成relative布局，即fixed-relative-absolute布局，可以实现内部元素固定位置。
（注：本文借鉴了部分这篇博客的内容）
