position:static(默认) | relative | absolute | fixed | sticky(CSS3)
适用于:除display属性定义为table-column-group | table-column之外的所有元素
-
relative: 参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移
-
absolute: 参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。
-
fixed: 偏移定位是以窗口为参考
一个水平垂直居中的例子:
<div style="height:200px;width:200px;background:#e37;position: relative;">
<div style="height:20px;width:20px;background:#000;position: absolute;top: 50%;left: 50%;margin-top: -10px;margin-left: -10px;"></div>
</div>