CSS布局-定位以及层级关系

适用于在网页中需要特定排版位置的元素使用，一般出现于有嵌套关系的盒子模型中。定位分为静态定位、相对定位、绝对定位、固定定位。

一、定位（position）的基本使用

1、静态定位       

position:static;        浏览器的默认规则，即标准流，一般不用写

2、相对定位

position: relative;        通过left、top等方位属性，相对于自己原来的位置移动，未脱离标    准流，任然占据原来的位置

position: relative;
top: 0;    //与顶部的距离
left: 0;    //与左边的距离

3、绝对定位

position: absolute;          通过方位属性，默认相对于浏览器可见区域移动，在父级有定位    的情况下，相对于父级进行移动，脱离标准流，不占位置

position: absolute;
top: 0;
left: 0;

3.1、自绝父相

        根据绝对定位的描述，相对与父级进行定位的情况，称之为自绝父相。为了满足自绝父相的条件，父级需要有定位，所以只要在父级添加position: relative; 即可。即子级元素绝对定位，父级元素相对定位。<