css三种定位模式

CSS(Cascading Style Sheets) 是一种用于描述网页样式的语言，其中最重要的部分就是定位模式，它能够帮助我们定位元素和控制元素样式。在 CSS 中，有三种常见的定位模式：相对定位、绝对定位和固定定位。

相对定位是相对于元素在文档流中的位置来定位其他元素。它通过修改元素的位置属性（top、bottom、left、right）来进行定位。例如，以下是一个使用相对定位的示例：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
} 

上述代码中，我们将 .container 元素设置为相对定位，然后通过修改 .child 元素的位置属性来实现在相对位置上平移 20 像素到上方和 30 像素到左边。

绝对定位是相对于最近的已定位的父级元素或文档窗口本身来定位元素，通过设置 position 属性为 absolute 实现，例如：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 30px;
} 

在上述代码中，.child 元素会相对于 .parent 元素进行定位。如果没有设置 .parent 元素为相对定位，则会相对于文档窗口进行定位。

固定定位与绝对定位类似，但它的定位是相对于浏览器窗口的。固定定位的元素不会随着滚动而滚动，而是始终保持在浏览器窗口的相同位置上。以下是一个固定定位的示例代码：

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

在上述代码中，我们将 .fixed 元素设置为固定定位。该元素的位置相对于浏览器窗口的左上角（0, 0）。这种定位方式通常用于创建跟随屏幕滚动而固定在屏幕某个位置的元素，如导航栏、悬浮框等。