定位布局解析

定位布局解析

为什么需要定位？

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值。
              

---