一、静态定位二、固定定位三、相对定位四、绝对定位五、示例代码

定位，能够实现元素的精准定位布局。主要有4种：静态定位、固定定位、相对定位、绝对定位。这4种定位方式都辅以left、top、right、bottom属性进行定位。

一、静态定位这是默认的定位方式，也就是你没有指明定位方式的时候，默认就是static布局。这种方式下的文档流是正常文档流，同时，left、top、right、bottom属性设置值后不会产生效果。

二、固定定位固定定位，设置position属性值为fixed；这种布局方式是以浏览器窗口为参考目标的，也就是说，left、top、right、bottom这4个属性是相对于浏览器窗口的。

注意：固定定位会让元素脱离文档流

三、相对定位相对定位，设置position属性值为relative；这种布局方式是以自身元素在默认情况下的初始位置（即正常文档流情况下）为参考目标的。这种布局方式不会让元素脱离文档流。

四、绝对定位绝对定位，设置position属性值为absolute；这种布局方式的参考目标和其他的有所不同，它的参考目标是最近的、非static定位的祖先元素。

通常，绝对定位和相对定位相结合的方式来实现一些布局，并且使用频率还高。具体方式是：

把子元素设置为绝对定位再把你要参照的祖先元素设置为相对布局

这种方式可以简称为“子绝父相”。

注意：绝对定位和固定定位一样，会让元素脱离文档流

五、示例代码p:nth-of-type(1) { position: absolute; background: lime; top: 10px; right: 30px;}