Position定位

222 阅读1分钟

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>