CSS定位布局理解

1，CSS定位属性：允许你对元素进行定位position的四种方式

（1）static(默认值) 所有标准文档流中的元素都是静态定位

（2）relative:相对定位：在原来的位置，移动的距离   

         position: relative;/*相对定位*/ 脱离原来位置定位。相对自己原来的位置进行定位

         left:40px; /*保留了原来的位置，向右移动大小*/如果向左移动，则值是负数

         top: 300px; /*在原来的位置，向下移动大小*/如果向上移动，则值是负数

 

（3）absolute:/*绝对定位 */元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间    保留原来位置进行定位

         特别说明：absolute定位是对离自己最近的那个非标准流盒子而言的

***相对最近的有定位的父级进行定位，如果没有，相对于文档进行定位

（1）如果这个元素没有父元素。那么top,left,right,bottom是相对浏览器窗口进行定位的

（2）如果有父元素，但是父元素没有定位。那么还是相对浏览器窗口进行定位

（3）如果绝对定位有父元素。而且父元素有定位（除static）,那么这个定位元素偏移是以自己父元素为基础

（4）fixed: 固定定位，不会随着页面滚动而滚动

 

2，常用的布局定位技巧：position:relative 与 position: absolute结合使用。

因为当子代设置了position:absolute，就会参考离自己最近并且设置了position:relative属性的父级元素。（准确的来说是：非标准流盒子）

子绝父相

3,body中默认的margin是8px，而且会根据不同的浏览器值会有所不同。所以开发中常设置：margin:0px; padding:0px;

http://note.youdao.com/noteshare?id=14f3d0f43d20ec4a2d811a11e5511338&sub=2B2BFACEF3C149D1A89DE41F986C21AB