这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
定位
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
- 定位则是让盒子自由的在某个盒子内移动或者固定到屏幕中某个位置，并且可以压住其他盒子
定位组成
- 定位：将盒子定在某个位置
- 定位=定位模式+边偏移
定位模式
position: 属性
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移
top:
bottom:
left:
right:
静态定位
- 静态定位是元素默认定位方式，无定位的意思
- 静态定位是按照标准流特性摆放位置，没有边偏移
- 在布局很少使用
position: static
相对定位
- 相对于自己原来的位置移动
- 原来的标准流位置继续占有，后面的盒子不改变位置
position: relative
绝对定位
- 没有祖先元素或者祖先元素没有定位，则以浏览器为定位
- 如果祖先元素有定位（相对、绝对、固定），则最近一级的有定位的祖先元素为参考移动点
- 不会占用原来的位置
position: absolute
子绝父相
子元素 position: relative
父元素 position: absolute
固定定位
- 以浏览器的可视窗口为参照点进行移动
- 跟父元素没有任何关系
- 不随着滚动条滚动
- 不占有原先的位置
固定定位小技巧：固定在版心右侧位置
小算法：
- 让固定定位的盒子left: 50%,走到浏览器的可视区的一半的位置
- 设置固定定位的盒子margin-left: 版心宽度的一半的距离。
position: fixed
粘性定位sticky
特点：
- 以浏览器的可视窗口为参照点移动元素
- 占有原先的位置
- 必须添加top\left\right\bottom其中一个才有效
不经常使用，因为兼容性较差，IE不支持
position: sticky; top: 10px
定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative相对定位 | 否 | 相对自身位置移动 | 常用 |
| absolute绝对定位 | 是 | 带有定位的父级 | 常用 |
| fixed固定定位 | 是 | 浏览器可视区 | 常用 |
| sticky粘性定位 | 否 | 浏览器可视区 | 当前阶段少 |
定位叠放次序
z-index: 1;
- 数值是所有整数，默认auto,数值越大，盒子越考上
- 如果属性值相同，按照书写顺序，后来者居上
- 数字后面不用加上单位
- 只有定位的盒子才有z-index属性
定位的拓展
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0,auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
- left: 50%; 让盒子的左侧移到父级元素的水平中心位置
- margin-left: -100px; 让盒子向左移动自身宽度的一半
定位的特殊性
绝对定位和固定定位也和浮动类似
- 行内元素可以直接设置宽度和高度
- 块级元素不设置宽度和高度默认大小是内容的大小
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题
绝对定位（固定定位）会完全压住盒子
浮动元素会压住盒子但是不会压住盒子里面的文字 浮动用来做文字环绕效果
但是绝对定位（固定定位）会压住下面标准流所有的内容
如果一个盒子既有left又有right属性，则优先执行left
同理<top>和<bottom>先执行<top>
