一、CSS 定位的概念

CSS 定位是 CSS 中的一种定位技术，它可以让元素在页面上以不同的方式定位，这样就可以控制元素的位置，以达到更好的视觉效果。CSS 定位可以分为静态定位、相对定位、绝对定位和固定定位四种。

二、静态定位

静态定位是默认的定位方式，它会使元素按照正常的文档流排列，也就是按照 HTML 代码的顺序来排列，不受任何影响。静态定位的元素不会被定位，不会有任何偏移。

三、相对定位

相对定位是指元素相对于其正常位置进行定位，它会偏移指定的距离，但是不会改变元素在文档流中的位置。相对定位的元素会被定位，但是不会改变其他元素的位置，也不会影响文档流。使用相对定位时，需要设置 top、left、right 和 bottom 四个属性，来设置元素的偏移距离。

四、绝对定位

绝对定位是指元素脱离文档流，以绝对的方式定位，它会偏移指定的距离，并且会改变元素在文档流中的位置。绝对定位的元素会被定位，会改变其他元素的位置，也会影响文档流。使用绝对定位时，需要设置 top、left、right 和 bottom 四个属性，来设置元素的偏移距离。

五、固定定位

固定定位是指元素脱离文档流，以固定的方式定位，它会偏移指定的距离，并且会改变元素在文档流中的位置。固定定位的元素会被定位，会改变其他元素的位置，也会影响文档流。使用固定定位时，需要设置 top、left、right 和 bottom 四个属性，来设置元素的偏移距离。不同的是，固定定位的元素会随着浏览器窗口的滚动而移动，而不会随着文档的滚动而移动。

六、示例分析

下面是一个使用 CSS 定位的示例：

12345678910111213
CSS

div {
position: relative;
top: 10px;
left: 20px;
width: 300px;
height: 200px;
background-color: #ccc;
}

p {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 50px;
background-color: #f00;
}

上面的代码中，div 元素使用相对定位，top 和 left 属性设置了元素的偏移距离，让元素向下偏移 10px，向右偏移 20px；p 元素使用绝对定位，top 和 left 属性设置了元素的偏移距离，让元素向上偏移 0px，向左偏移 0px，这样就可以让 p 元素和 div 元素重叠在一起。