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

一、静态定位

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

二、固定定位

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

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

三、相对定位

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

四、绝对定位

绝对定位，设置position属性值为absolute；这种布局方式的参考目标和其他的有所不同，它的参考目标是最近的、非static定位的祖先元素。 通常，绝对定位和相对定位相结合的方式来实现一些布局，并且使用频率还高。具体方式是：

1. 把子元素设置为绝对定位
2. 再把你要参照的祖先元素设置为相对布局 这种方式可以简称为“子绝父相”。

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

五、示例代码

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}