[分享]css中存在3种定位机制

在CSS中，我们会经常遇到定位这个概念。在实际开发中，实现页面布局的时候，定位是一种非常重要的手段。三种常用的定位机制分别是相对定位、绝对定位和固定定位。1. 相对定位相对定位是相对于元素在文档流中的...

在CSS中，我们会经常遇到定位这个概念。在实际开发中，实现页面布局的时候，定位是一种非常重要的手段。三种常用的定位机制分别是相对定位、绝对定位和固定定位。
1. 相对定位
相对定位是相对于元素在文档流中的原始位置进行定位的。也就是说，它不会脱离文档流，所以它的定位不会影响其他元素的排列。
相对定位的实现方法是使用position:relative;属性。在这种定位机制下，元素可以通过top、right、bottom、left四个属性进行定位。比如：

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

这段代码会把p元素相对于原来的位置向右移动50像素，向下移动20像素。
2. 绝对定位
绝对定位是相对于最近的已定位父节点或body元素进行定位的。如果没有已定位的父元素，则相对于body元素进行定位。它会脱离文档流，所以它的定位会影响其他元素的排列。
绝对定位的实现方法是使用position:absolute;属性。在这种定位机制下，元素可以通过top、right、bottom、left四个属性进行定位。比如：

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

这段代码会把p元素相对于最近的已定位父节点或body元素向右移动50像素，向下移动20像素。
3. 固定定位
固定定位是相对于浏览器窗口进行定位的。它不会随着页面的滚动而滚动，所以它的位置始终固定在窗口中的某个位置。
固定定位的实现方法是使用position:fixed;属性。在这种定位机制下，元素可以通过top、right、bottom、left四个属性进行定位。比如：

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

这段代码会把p元素相对于浏览器窗口向右移动50像素，向下移动20像素。
三种定位机制在不同的场景下都可以发挥重要的作用，但也需要注意它们所可能带来的副作用。在实际开发中，我们应当根据具体情况来选择适当的定位机制。