前文
本人在这个特殊的时期开始学习前端，这是我对定位的一个总结，希望对跟我一样还在学习的同志们有帮助。
定位position
定位的步骤
- 给元素添加position属性，证明该元素要做位置的变化
- 确定参照物！（通过position的属性值来确定：static\absolute\relative\fixed\sticky）
- 确定坐标 left right top bottom
position的属性值
1：static静态定位：
- ①position的默认值
- ②不会识别left，right，top， bottom指定的坐标
2：absolute绝对定位：
- 参照物：按照已经有定位的父元素进行位置的变化。
- 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
- 绝对定位，脱离文档流，不占据空间
列如：要把文字定位到图片的底部（常用于新闻）
首先创建一个盒子里面包含图片和文字
然后把文字用定位的方法让它处于图片的底部，如下是源码和效果图。
3：relative相对定位：
- 参照物：自身默认的位置！
- 始终占据空间，不会破坏文档流
- 一般用于做别的定位元素的参照物
4：fixed固定定位：
- 参照物：浏览器窗口
- 脱离整个文本流。不占据空间
用于页面两侧的导航或广告，列如：
创建两个盒子，一个用于撑开整个页面的高度，使其出现滚动条，另一个设置fixed让它始终处于浏览器的右下角
源码：
5：sticky黏性定位：
- position:relative 和 position:fixed的结合
- 如果页面没超出窗口范围，按照relative 执行
- 如果内容超出窗口位置，按照fixed执行
注：z-index可以控制定位元素的层次关系，属性值为一个数字（可以为负数），数字越大，层次关系越高，默认值 auto;