千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频
2023-07-12 00:08 作者:bili_52642857795 | 我要投稿
1：定位的日常用处
地图的标记点
电商网站的标识和按钮 浮动快捷入口 吸附导航
.box{
position:( static：静止定位 relative 相对定位 fixed 固定定位 absolute 绝对定位 sticky 粘性定位)
top：100px;
bottom：10px;
left：20px;
right:5px;
}
relative(相对定位)：相对样式需要配合left、top、right、bottom定位属性才能生效 他相对的是容器自身的屏幕坐标0，0点。容器位置发生变化后，他自身原来占据的空间依然保留。
默认会覆盖没有定位的容器。
absolute（绝对定位）：会脱离文档流
定位的参照物为最近的祖先元素的0.0点坐标
他的默认会覆盖没有定位的盒子
fixed（固定定位）：就是绝对定位的特例
固定定位是相对于浏览器当前画面定位的，如果浏览器滚动 但是他的位置还是保持页面不变
top right bottom left 被用来定位元素 但是不是必须的
sticky(粘性定位):
他如果没有效果一般是因为
父元素不能有overflow：hidden和overflow：auto
元素自身必须要有top right bottom left 一个或多个属性，否则就是相当于静态定位
父元素的高度不能低于sticky定位元素的高度
粘性定位元素只能在父元素内生效
top：0 当容器为固定定位时 相对于父容器顶部的距离 固定不动
sticky：
粘性定位初始状态相对于静止定位
相对于父容器得到定位条件符合时，容器变现为固定定位
top right bottom left 至少声明一个 这样粘性定位才能有效
