[分享]css中定位方式的参照物

CSS中的定位方式是指通过不同的属性值来控制元素在文档流中的位置。在CSS中，有三种常见的定位方式，包括相对定位、绝对定位和固定定位。这些定位方式都是基于元素在文档流中的参照物进行计算的。相对定位是指...

CSS中的定位方式是指通过不同的属性值来控制元素在文档流中的位置。在CSS中，有三种常见的定位方式，包括相对定位、绝对定位和固定定位。这些定位方式都是基于元素在文档流中的参照物进行计算的。
相对定位是指元素相对于其在文档流中默认的位置进行偏移。相对定位的参照物是元素在文档流中的原始位置。可以使用top、bottom、left和right属性来控制相对定位的位置。

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

绝对定位是指元素相对于其父元素的位置进行定位。如果没有父元素，则相对于文档流中最近的已定位的祖先元素进行定位。绝对定位的参照物是父元素或祖先元素。可以使用top、bottom、left和right属性来控制绝对定位的位置。

div{
  position: relative;
}

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

固定定位是指元素相对于浏览器窗口的位置进行固定。固定定位的参照物是浏览器窗口。可以使用top、bottom、left和right属性来控制固定定位的位置。

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

总的来说，CSS中的定位方式是通过不同的参照物来计算元素的位置。掌握不同的定位方式可以帮助我们更好地控制页面布局。