（9）HTML&&CSS笔记（定位*）

1、定位：在网页中，我们是用来确定位置的。
position：
方位值：

• top 上
• bottom 下
• left 左
• right 右

static 静态定位（方位值是不起作用的）
relative 相对定位（方位值起作用）

absolute 绝对定位（方位值起作用）
参考系：
除了静态定位之后，其它都可以作为参考；
如果没有参考系，默认为body来进行参考；
作为参考物需要满足的要求：
（1）必须为直系父级关系；
（2）除了静态定位之后，其它都可以作为参考；
注意：如果直系父级有多个都作为参考系，只取离元素最近的元素作为参考系；（就近原则）

fixed 固定定位（方位值起作用）
参考系：以页面的可视区域作为参考系（不受页面的实际高度限制）；

2、定位的特征
（1）是否脱离文档流
（2）是否对元素本身造成影响
（3）是否支持margin
（4）是否对inline-block，vertical-align，float造成影响

relative：
不脱离文档流；
不会对元素的高度造成影响；
不会使行内元素支持宽高；
根据样式类型定论是否支持margin，padding；
不会对inline-block，vertical-align，float造成影响

absolute：
脱离文档流（完全）；
使用后默认由内容撑开宽高；
会使行内元素支持宽高；
支持margin，padding；
不支持margin：auto；
会对inline-block，vertical-align，float造成影响

3、层级问题（使用了定位[除了静态定位]元素）
后来者居上
默认层级：

• 如果使用 >0 居上
• 等于0 默认值
• 小于0 底部

如果层级样式相等，后来者居上。