关于css的学习整理（二）

整理一下在css中的定位position

NO1：position：static  静态定位

块级元素会生成一个矩形框，行内元素会创建一个或者多个行框

效果如图：

所以静态定位的特点就是不能再设置上，下，左，右边距，即代码中的left，top是无效的。

NO2：position：absolute  绝对定位

      通过绝对定位，元素可以放置到页面上的任何一个位置，通过left，right，top，bottom对元素进行定位，其定位的基准是距离最近的具有定位设置的父对象，如果没有这样的对象，则父对象为body对象。

代码如下：

效果如下：

class为div_class的div是class为div1_class的div的父对象，所以后者的定位是以前者的定位为基准，比方上面后者的left：0；但是父对象的left：30px；所以后者的其实距离body对象的左距离为30px（因为前者没有父元素，所以它是以body对象为父对象）。

NO3：position：relative  相对定位

元素框偏移某个距离，它原本所占的空间仍保留

代码：

效果：

       这里的top：20px是从元素的原始上边（基准为元素原始位置）增加20px；left也是在原始左侧增加20px；这里的值也可以为负数，例如left：-10px；意为在元素的原始左侧减去10px；

NO4：position：fixed  固定定位

固定定位与绝对定位效果是一样的，唯一的区别是固定定位不会随滚动条的移动而改变（用户视角）