本文档始于2025.11.19

CSS定位

1.核心概念

在CSS中，定位（position） 是一种排版方式，他通过定义元素本身与其他元素的相对位置来排版
分为几种常见的定位方式：
static 默认定位 默认，在正常文档流中
relative 相对定位 相对自身原位置偏移，不脱离文档流
absolute 绝对定位 脱离文档流，相对于最近的非static祖先定位
fixed 固定定位 脱离文档流，相对于视口定位
sticky 粘性定位 在阈值范围内相对定位，超过后固定定位

2.解决了什么问题

有了基本的排版与布局能力，可以将任何元素放到页面的任何位置
创建出简单的排版页面，但纯定位的排版相对脆弱

3.代码示例

详见../../study_by_myself/position.html以及../../homework/albb

4.注意事项/常见误区

纯定位的排版布局很脆弱，特别是在大量使用绝对定位的情况下
绝对定位一定要有相对定位的父容器
注意top left bottom right各个属性的使用

5.相关链接

MDN文档 Position
Deepseek对话 CSS定位
菜鸟教程 CSS Position

6.本次学习总结

这次学习意外的是先硬着头皮做了一两个极简登录页面然后再学了，利用ai进行提问与对话式学习
之后再去看看文档，总体比较简单，该学习更难的内容了