css中定位方式有哪些

在CSS中，我们通过定位方式来控制元素在页面上的位置。一共有5种定位方式，分别是静态定位、相对定位、绝对定位、固定定位和粘性定位。
1. 静态定位
静态定位是元素默认的定位方式，也是最基本的定位方式。在静态定位下，元素的位置由文档流决定，无法通过top、left、right、bottom属性来控制元素位置。
代码如下：

p {
  position: static;
} 

2. 相对定位
相对定位是元素相对于自己原来的位置进行定位，通过top、left、right、bottom属性来定义元素的偏移量。相对定位下，元素在文档流中仍然存在，只是位置发生了变化。
代码如下：

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

3. 绝对定位
绝对定位是元素相对于其父元素进行定位，通过top、left、right、bottom属性来定义元素的偏移量。在绝对定位下，元素脱离了文档流，不再占据原来的位置，而是相对于其最近的已定位祖先元素进行定位。如果没有已定位祖先元素，那么元素将相对于body元素进行定位。
代码如下：

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

4. 固定定位
固定定位是元素相对于浏览器窗口进行定位，通过top、left、right、bottom属性来定义元素的偏移量。在固定定位下，元素也脱离了文档流，不再占据原来的位置，而是一直停留在浏览器窗口的固定位置。
代码如下：

p {
  position: fixed;
  top: 0;
  left: 0;
} 

5. 粘性定位
粘性定位是相对于滚动容器（例如浏览器窗口或元素）进行定位，当元素到达指定位置时它将“粘”在那个位置，并在滚动时保持不变。当滚动容器未滚动到粘性元素的位置时，它的定位方式为相对定位，滚动到指定位置时，它的定位方式将变为固定定位。
代码如下：

p {
  position: sticky;
  top: 20px;
} 

总结
CSS中定位方式有静态定位、相对定位、绝对定位、固定定位和粘性定位五种方式。我们可以根据具体需求灵活选择不同的定位方式来控制元素在页面上的位置。