[分享]css中 绝对定位 固定定位

CSS中的定位，一般有三种方式，分别是相对定位、绝对定位以及固定定位。而本文主要介绍绝对定位与固定定位，这两种方式在前端页面布局中起着十分重要的作用。首先来讲绝对定位，绝对定位是根据元素的父元素来进行...

CSS中的定位，一般有三种方式，分别是相对定位、绝对定位以及固定定位。而本文主要介绍绝对定位与固定定位，这两种方式在前端页面布局中起着十分重要的作用。

首先来讲绝对定位，绝对定位是根据元素的父元素来进行定位的，也就是说不管父元素的位置怎样变化，被定位元素总是会摆放在固定的位置上。

.example{
  position: absolute;
  top: 50px;
  left: 100px;
} 

上述代码中的example元素会从正常文档流中脱离，然后以页面为定位参照对象来指定top和left的距离，从而进行绝对定位。

而固定定位则是在浏览器窗口中进行定位，无论浏览器如何滚动或缩放，元素也会始终保持在同一个位置上。

.example{
  position: fixed;
  top: 50px;
  left: 100px;
} 

同样的，上述代码中的example元素会从正常文档流中脱离，但是此时它是相对于浏览器窗口进行定位，从而进行固定定位。

综上所述，绝对定位和固定定位都能够简化页面布局的复杂度，但是需要注意它们的使用时机以及与其他元素的相互影响。