前言
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子，定位则是可以让盒子自由的在某个内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
- 定位就是将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
- 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式：
- 定位模式决定元素的定位方式，它通过css的
position属性来设置，有以下四个值static静态定位relative相对定位absolute绝对定位fixed固定定位
边偏移:
- 边偏移就是定位的盒子移动到最终位置，有以下四个属性
top顶部偏移量，定义元素相对于其父元素上边线到距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离right右侧偏移量，定义元素相对于其父元素右边线到距离
1.static静态定位
- 是元素默认的定位方式（可以理解为无定位的模式）
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少使用
选择器{position:static;}
2.relative相对定位
- 相对定位是元素相对于元素原来的位置移动位置,参照点是自己原来的位置
- 相对定位继续占有原来在标准流的位置，后面的盒子依然以标准流的方式对待它（不脱标）
选择器{position:relative}
3.absolute绝对定位
- 绝对定位相对于祖先元素的位置来移动位置
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（费static定位）则以最近一级的定位祖先元素为参考点移动位置
- 绝对定位不再占位标准流（脱标）
选择器{position:absolute}
4.子绝父相
- 子级是绝对定位的话，父级要用相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子的任何一个地方，不会影响其他兄弟盒子
- 父盒子需要加定位限制子盒子在父盒子内显示
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位
5.fixed固定定位
- 固定定位是元素固定于浏览器可视区的某一个位置，例如，可以在浏览器页面滚动时元素的位置不会改变
选择器{position:fixed;}
固定定位的特性：
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条的滚动而滚动
- 固定定位不占有原先的位置（脱标）
- 其实固定定位也可以看作是一种特殊的绝对定位
6.sticky粘性定位
- 粘性定位可以被认为是相对定位和固定定位的混合
选择器{position:sticky;top:10px;}
粘性定位的特点：
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom其中一个边偏移才有效
- 如果不加边偏移，会当作相对定位来看待
定位叠放次序z-index
- 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以用
z-index属性来控制盒子的前后次序（z轴）
选择器{z-index:1;}
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写的顺序，后来居上
- 注意数字后面不能加单位
- 只有定位的盒子才有z-index属性
绝对定位absolute的盒子居中算法
- 加了绝对定位的盒子不能通过
margin:0 auto;水平居中- 与固定定位相同思路
定位的特殊特性
绝对定位和固定定位和浮动类似：
- 行内元素添加绝对或固定定位，可以直接设置高度和宽度
- 块汲元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
- 脱标的盒子不会触发外边距塌陷，浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题
- 绝对定位、固定定位会完全压住盒子，压住下面标准流的所有内容。而浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字以及图片，浮动之所以不会压住文字，是因为浮动产生的最初目的就是为了做文字环绕效果，文字会围绕浮动元素。
