定位
# 定义
- 这里我们要了解下什么是定位。定位是干什么的
- 定位也是网页中布局的一种方式。可以通过设置不同定位方式以及偏移量来将任意元素 定位到任意位置
# 怎么表示定义
- 当元素添加一下属性，就表示开启定位了
div {
position: relative;
}
1
2
3
2
3
通过上述实例中，只要属性
position的值不是 static 的话，表示开启定位了
# 定位有哪些值
- position:
- static 表示默认定位
表示默认值，表示没有开启定位 - relative 表示相对定位
- absolute 表示绝对定位
- fixed 表示固定定位
- stickily 表示粘滞定位
- static 表示默认定位
# 属性分析以及案例
# relative 相对定位
- 通过代码
position: relative;来开启相对定位- 相对定位的参照物就是 元素自身位置
- 通过偏移量元素 来控制位置（top/ right/ bottom/ left）
- 设置相对定位后，元素的层级会发生变化(通过下列实例截图)
- 设置相对定位后，元素并不会脱离文档流(通过下列实例截图)
- 设置相对定位后，元素的性质不会发生变化。块级还是块级，行内还是行内
# absolute 绝对定位
- 通过代码
position: absolute;来开启绝对定位- 相对定位的参照物就是 距离最近的非 static 的祖先元素(如果父类都没有设置定位属性，那就是相对于跟标签 html 来定位)
- 通过偏移量元素 来控制位置（top/ right/ bottom/ left）
- 设置绝对定位后，元素的层级会发生变化(通过下列实例截图)
- 设置绝对定位后，元素会脱离文档流(通过下列实例截图)
- 设置绝对定位后，元素的性质会发生变化。
行内会便成为块级元素
# fixed 固定定位
- 通过代码
position: absolute;来开启固定定位- 固定定位的特性跟相对定位保持大部分相同。唯一不同的是参照物
- 固定定位的参照物是相对于浏览器的视口进行定位
# 粘滞定位
- 通过代码
position: stickily;来开启固定定位- 如果想让粘滞定位生效的话，必须设置一个方位值(top/ left/ bottom/ right)
- 当未满方位值的时候，是相对定位。满足之后固定定位