CSS-定位篇

1.为什么需要定位？

（1）当我们滚动窗口的时候，盒子是固定屏幕某个位置的
（2）浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
（3）定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

2.定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
（1）定位=定位模式+边偏移
（2）定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置
（3）定位模式：定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为五个

值	语义
static	静态定位（默认状态）
relative	相对定位
absolute	绝对定位
fixed	固定定位
stick	粘性定位

（4）边偏移属性：top bottom left right
（5）静态定位static
（6）相对定位：
    *元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化
    *相对定位是参照于元素在文档流中的位置来定位的
    *相对定位会提升元素的层级
    *相对元素不会使元素脱离文档流
    *相对定位不会改变元素的性质，块级元素还是块级元素

（7）绝对定位：
    -开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
    -开启绝对定位后，元素会从文档流中脱离
    -开启绝对定位会改变元素的性质，行内元素变成块级元素，块的宽度和高度被内容撑开
    -开启绝对定位会使元素提升一个层级
    -绝对定位元素是相对其包含块进行定位的
    -包含块：正常情况下，包含块就是离当前元素最近的祖先元素
    -绝对元素的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有祖先元素都没有开启定位则根元素就是它的包含块
（8）子绝父相：
     i.子级绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子
     ii.父盒子需要加定位限制子盒子在父盒子内显示
    iii.父盒子布局时，需要占有位置，因此父亲只能是相对定位
（9）固定定位：固定定位是元素固定于浏览器可视区的位置。
    主要使用场景：
    -可以在浏览器页面滚动时元素的位置不会改变
    -以浏览器的可视窗口为参照点移动元素
    -和父元素没有任何关系
    -不随滚动条滚动
    -固定定位不再占有原来的位置
    -固定定位小技巧：

（10）粘滞定位：粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定（存在兼容性问题）
（11）定位叠放次序z-index
   祖先的元素的层级再高也不会盖住后代元素

3. 定位的拓展

（1）水平布局：left+margin-left+boder-left+padding-left+width+padding-right+boder-right+margin-right+right=网页水平宽度
（2）当我们开启绝对定位后：水平方向的布局等式就需要添加left和right两个值当发生过度约束：如果9个值中没有auto则自动调整right值以满足等式如果有auto，则自动调整auto值以使等式满足可以设置auto的值：margin width left right