定位布局解析

定位布局解析

为什么需要定位？

1、浮动可以让多个会计盒子一行没有缝隙并排显示，经常用于横向排列盒子。2、定位则可以让盒子自由的在某个盒子内移动位置或者固定某个位置，并且可以压住其他盒子。定位模式：    1、position：relative （相对定位），它是根据自身偏移量进行定位的，参照物是自己，继续保留原来的位置，对外不脱离文档流。    2、position：absolute (绝对定位),它是通过父级有无定位来进行定位的，如果祖先元素没有定位，则以浏览器为准定位（document文档），如果祖先元素有定位（相对，绝对，固定）则以就近原则进行参照，不保留原先位置，对外脱离文档流。    3、父相子绝的原理：自己绝对定位，不会占有位置，可以放到父级盒子里面的任何一个地方，不会影响其他兄弟盒子，其父级需要加定位限制子盒子在父盒子内显示，且相对定位最合适，父级盒子不会脱标。    4、position：fixed (固定定位)，以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动，国定定位不占有原先的位置。    固定定位的小技巧：固定在版心的侧面：首先把元素移动到浏览器的一半，然后设置合适的margin值就行。    

###### 注意！

         一 、定位可以通过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值。