一、relative相对定位

（1）相对定位的锚点在元素的正中心；（2）relative不会脱离正常文档流；（3）relative会覆盖static定位（即默认定位）的元素

#box2 {
    position: relative;
    left: 25%;
    /* left的百分比是相对于父容器的width */
    bottom: -100px;
}

二、absolute绝对定位

（1）定位锚点：absolute元素会相对于最近的非static定位的父元素进行定位；
通过top、right、bottom、left四个属性来调整absolute元素相对于最近非static定位祖先的相对位置；这四个属性之一，没有设置时不会起作用，absolute元素会留在原地

#box5 {
    position: absolute;
    left: 0;
}

.border{
    position: relative;
}
#box5 {
    position: absolute;
    left: 0;
    top: 100px;
}

（2）absolute会脱离正常文档流，即absolute元素的位置会被后面的元素占用

（3）z轴：absolute元素脱离文档里流后会浮动在z轴上，可能会覆盖其它元素（如下图），可以通过z-index属性调整不同元素在z轴的位置关系

#box5 {
    position: absolute;
}

#box5 {
    position: absolute;
    z-index: -1;
}

（4）当absolute元素的height和width被设置为auto时，可以通过top+bottom、left+right的组合来决定该元素的宽高度

#box2_4_1 {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 150px;
    background-color: #fa8c16;
}

三、fixed绝对定位（相对于浏览器窗口）

（1）定位锚点：浏览器窗口，通过top、right、bottom、left四个属性进行相对定位（必须设置其中两个属性，否则fixed元素无法被渲染）

（2）脱离正常文档流、z轴会产生覆盖（只覆盖static定位元素）

（3）如果不指定宽度，fixed元素的宽度默认等于内容宽度（即使元素原本是块级元素），效果示例见顶部一级标题