【css】相对定位，绝对定位和固定定位

CSS中的三种主要定位方式

1. 相对定位（Relative Positioning）:

相对定位是指元素相对于它在文档流中的初始位置进行定位。当对一个元素应用相对定位时，可以通过设置 top、right、bottom 和 left 属性来移动元素相对于它的初始位置。这些属性指定了元素在水平和垂直方向上的偏移量。相对定位不会从文档流中移除元素，因此元素原本所占的空间依然存在。

2. 绝对定位（Absolute Positioning）:

绝对定位是指元素相对于它的最近的已定位祖先元素进行定位（如果没有已定位的祖先元素，则相对于文档的初始位置进行定位）。当对一个元素应用绝对定位时，可以使用 top、right、bottom 和 left 属性来精确地指定元素在页面上的位置。绝对定位会将元素从文档流中移除，并且它不会对其他元素产生任何影响。

3. 固定定位（Fixed Positioning）:

固定定位是指元素相对于视口进行定位，它的位置在页面滚动时不会改变。通过将元素设置为固定定位，可以将它固定在页面的某个位置上，例如固定在屏幕的顶部或底部。固定定位也使用 top、right、bottom 和 left 属性来指定元素在页面上的位置。

这些定位方式可以通过 CSS 的 position 属性来设置。例如：

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

.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}

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

需要注意的是，定位的效果还会受到其他 CSS 属性和元素的影响，比如盒模型、浮动和 z-index 属性等。

在 CSS 中，不同元素之间的定位方式会相互影响它们的布局和位置。以下是一些常见情况：

1. 父级和子级之间的影响：

• 相对定位（Relative Positioning）：对于相对定位的子元素，它们的定位是相对于父级元素进行的。子元素的位置偏移属性（如 top、right、bottom 和 left）会相对于父级元素的位置进行计算。
• 绝对定位（Absolute Positioning）：对于绝对定位的子元素，它们的定位是相对于最近的已定位祖先元素（即它的 position 属性值为相对定位（relative）、绝对定位（absolute）或固定定位（fixed））进行的，如果没有已定位的祖先元素，则相对于文档进行定位。在这种情况下，子元素的位置偏移属性会相对于其定位祖先元素的位置进行计算。

2. 同级元素之间的影响：

• 相对定位和绝对定位：对于同级元素，它们的定位方式彼此独立，互不影响。它们的位置是相对于它们在文档流中的位置进行计算的。因此，如果一个元素应用了相对定位或绝对定位，它的位置偏移不会影响其他同级元素的位置。
• 固定定位（Fixed Positioning）：对于固定定位的元素，它们的位置是相对于视口进行计算的，因此固定定位的元素不会影响其他元素的布局和位置。

总的来说，父级和子级之间的定位方式会影响它们的相对位置，而同级元素之间的定位方式相互独立。