[分享]css中定位有几种类型

CSS中定位有三种类型：相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），它们在网页设计中的作用都非常重要。相对定位是针对元素的原始位置进行定位，通过设置元素的le...

CSS中定位有三种类型：相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），它们在网页设计中的作用都非常重要。
相对定位是针对元素的原始位置进行定位，通过设置元素的left、right、top、bottom属性来改变元素原始位置的偏移量。例如：

p {
  position: relative;
  left: 20px;
  top: 10px;
} 

这段代码将会将p元素的位置往右偏移20像素，往下偏移10像素。
相对定位不会脱离文档流，也就是说，当元素的兄弟元素发生位置变化时，相对定位元素的位置也会相应变化。
接下来是绝对定位，同样通过left、right、top、bottom属性来定位元素的位置。不同之处在于，它不依赖于元素原始位置，而是依赖于距离最近的已定位祖先元素进行定位。如果没有已定位祖先元素，它会以body元素为参考对象。例如：

p {
  position: absolute;
  left: 20px;
  top: 10px;
} 

这段代码将会将p元素相对于它最近的已定位祖先元素（或body元素）偏移20像素到左侧，10像素到上方。
绝对定位的元素在定位后，会脱离文档流，其他元素不会受到它的影响。
最后是固定定位，与绝对定位类似，但是它是相对于浏览器窗口固定位置进行定位，无论用户向上或向下滚动，元素都会保持不变。例如：

p {
  position: fixed;
  left: 20px;
  top: 10px;
} 

这段代码将会将p元素固定在浏览器窗口的左上角，距离浏览器窗口左侧20像素，距离浏览器窗口上侧10像素。
固定定位的元素也会脱离文档流，对其他元素没有影响。
以上就是CSS中定位的三种类型，它们的应用各异，可以根据需要进行选择。