定位布局

定位布局

定位属性： position 
作用：  指定元素的定位类型
取值：
    static   默认不定位
    relative 相对定位 
    absolute 绝对定位
    fixed    固定定位

首先我们先创建三个不同颜色的方块方便演示

position:raltive;相对定位
特点：
相对不脱离文档流，并且是占有之前的位置，随着自身原来位置的左顶点进行位置偏移的。
偏移量：
top
left
right

 这里我们来偏移第一个红色小方块

因为 相对定位后元素不会脱离文档流且占有原来位置
所以下方元素位置不会变动，

绝对定位

关键字： position：absolute
特点：脱离文档流，并且不占有之前的位置，随着页面的左顶点进行位置偏移。

这里可以看到由于我们在第二个方块上进行了绝对定位，使其脱离了文档流 所以下方元素接替了他的位置，也使他漂浮在第一个元素上方。 如过此时我们也在第三个上加上绝对定位呢

这里可以看到 由于我们没有给第三个元素设置偏移方向和距离，他的位置没有改变，但是他将上方元素的重合位置给覆盖了，这里就引入了一个新的点：元素堆叠顺序
堆叠顺序：
在元素出现堆叠效果时改变他们的顺序
属性： z-index
取值： 没有单位的数字 值越大越靠上，可以是负数
在没有设置时 默认为下方元素会覆盖在上方元素，

    上面我们知道了绝对定位总是以页面坐上角进行定位，这样我们在元素内设置时就会比较麻烦
    但是如果我们能将默认改为 以该元素的父级元素呢？

答案当然是可以的，这里就要采用相对定位和绝对定位相组合形成的 子绝父相定位
顾名思义： 子级使用 绝对 父亲使用相对

这样子是不是十分方便了呢