【CSS篇】position的属性和区别

position 属性在 CSS 中用于定义元素的定位方式，它决定了元素如何根据其原始位置进行放置。以下是 position 属性的主要值及其区别：

1. static

• 概述: 默认值。元素按照正常的文档流进行布局。
• 特点:
  • 元素不会被特殊的定位规则影响。
  • 忽略 top, bottom, left, right 或者 z-index 声明。
  • 块级元素从上往下纵向排布，行内元素从左向右排列。

2. relative

• 概述: 相对定位。元素相对于其正常位置进行定位。
• 特点:
  • 使用 top, bottom, left, right 可以调整元素的位置，但这些属性是基于元素原本在文档流中的位置。
  • 定位后原位置仍保留，即不会影响其他元素的布局。
  • 不脱离文档流。

3. absolute

• 概述: 绝对定位。元素相对于最近的一个非 static 定位的祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是浏览器窗口）。
• 特点:
  • 使用 top, bottom, left, right 来精确定位。
  • 脱离了正常的文档流，意味着它的存在不再占据空间，不影响其他元素布局。
  • 如果想要精确控制一个绝对定位元素的位置，通常需要有一个相对定位的父元素作为参照点。

4. fixed

• 概述: 固定定位。元素相对于浏览器窗口（viewport）定位，即使页面滚动，该元素的位置也不会改变。
• 特点:
  • 类似于 absolute，但是它是相对于视口而不是任何HTML元素。
  • 对于创建固定导航栏、回到顶部按钮等非常有用。
  • 同样脱离文档流。

5. inherit

• 概述: 规定从父元素继承 position 属性的值。
• 特点:
  • 不常用，主要用于特殊需求下需要子元素跟随父元素的定位策略时使用。

关键点总结

• relative：相对于自身原有位置偏移，不影响文档流。
• absolute：相对于最近的非 static 定位的祖先元素或根元素（如果找不到这样的祖先），脱离文档流。
• fixed：相对于浏览器窗口，不随页面滚动而移动，脱离文档流。
• static 和 inherit 分别表示默认行为和继承父元素的行为。

通过理解这几种定位方式的区别，可以根据具体的设计需求选择合适的定位方法来实现理想的网页布局效果。