共计 935 个字符，预计需要花费 3 分钟才能阅读完成。
定位布局解析
为什么需要定位？
1、浮动可以让多个会计盒子一行没有缝隙并排显示，经常用于横向排列盒子。2、定位则可以让盒子自由的在某个盒子内移动位置或者固定某个位置，并且可以压住其他盒子。定位模式：1、position：relative（相对定位），它是根据自身偏移量进行定位的，参照物是自己，继续保留原来的位置，对外不脱离文档流。2、position：absolute (绝对定位), 它是通过父级有无定位来进行定位的，如果祖先元素没有定位，则以浏览器为准定位（document 文档），如果祖先元素有定位（相对，绝对，固定）则以就近原则进行参照，不保留原先位置，对外脱离文档流。3、父相子绝的原理：自己绝对定位，不会占有位置，可以放到父级盒子里面的任何一个地方，不会影响其他兄弟盒子，其父级需要加定位限制子盒子在父盒子内显示，且相对定位最合适，父级盒子不会脱标。4、position：fixed (固定定位)，以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动，国定定位不占有原先的位置。固定定位的小技巧：固定在版心的侧面：首先把元素移动到浏览器的一半，然后设置合适的 margin 值就行。| 定位模式 | 是否脱标 | 移动位置 |
|---|---|---|
| relative 相对定位 | 否（占有位置） | 相对于自身位置移动 |
| absolute 绝对定位 | 是（不占有位置） | 带有定位的父级 |
| fixed 固定定位 | 否（不占有位置） | 浏览器可视区 |
| sticky 粘性定位 | 是（占有位置） | 浏览器可视区 |
| static 静态定位 | 否 | 默认 |
###### 注意！
一、定位可以通过 z -index 来改变层级
二、通过定位还可以水平居中块级盒子：1、给父级设置 position-relative 相对定位，然后在给自己盒子设置 position 绝对定位，值 top：0；left:0; right:0; bottom:0; margin: auto; 即可居中。2、父级相对定位，子级绝对定位，值 top：50%；left：50%；随后设置合适的 margin 值 即可居中。3、行内元素定位后会具有行内块元素的特点可以直接设置宽高。4、设置定位后，盒子水平居中 margin：0 auto；无效 可以通过设置值 top：0；left:0; right:0; bottom:0; 来进行使用 margin 值。
正文完
