CSS position 属性 菜鸟教程
在CSS中，position属性用于指定一个元素在文档中的定位方式。它决定了元素的布局行为以及它是如何相对于其正常位置、包含块或浏览器窗口进行定位的。以下是关于position属性的详细指南。
基本语法
selector { position: value; }- selector：你要应用样式的HTML元素的选择器。
- value：可以是以下值之一：static、relative、absolute、fixed 或 sticky。
值及其解释
static（默认值）
- 元素按照正常的文档流进行布局。
- top、right、bottom 和 left 属性无效。
relative
- 元素相对于其在正常文档流中的原始位置进行定位。
- 使用 top、right、bottom 和 left 属性可以移动元素的位置，但这些改变不会影响其他元素的布局。
absolute
- 元素相对于最近的已定位祖先元素（即设置了 position 且不为 static 的元素）进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素）。
- 元素从文档流中移除，因此不占据空间。
fixed
- 元素相对于浏览器窗口进行定位。
- 即使页面滚动，元素也会保持在固定位置。
- 从文档流中移除，不占据空间。
sticky
- 根据用户的滚动位置进行切换的混合类型定位。
- 在 relative 和 fixed 定位之间切换，取决于滚动位置是否超过指定的阈值（通过 top、right、bottom 或 left 属性设置）。
- 必须为 sticky 元素设置一个 top、right、bottom 或 left 属性中的一个，否则它将表现得像 relative 定位一样。
注意事项
- 使用 absolute 或 fixed 定位的元素会脱离文档流，这意味着它们不会影响到周围元素的布局，同时也不会被周围元素的布局所影响。
- sticky 定位在旧版浏览器中可能不受支持，使用时需考虑兼容性。
- z-index 属性通常与 position 属性一起使用来控制元素的堆叠顺序（尤其是在 position 为 relative、absolute、fixed 或 sticky 时）。
示例
下面是一个综合示例，展示了不同 position 值的用法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Position Example</title> <style> .static-box { width: 100px; height: 100px; background-color: lightblue; } .relative-box { position: relative; width: 100px; height: 100px; background-color: lightcoral; top: 20px; left: 20px; } .absolute-container { position: relative; width: 200px; height: 200px; background-color: lightgreen; } .absolute-box { position: absolute; width: 100px;
