css - 定位

定位：

定位=定位模式 + 边偏移

 

相对定位(relative)：

移动的时候是依照自己原来的位置，原来标准流的位置继续占有，后面的盒子仍然以标准流的方式待他

    元素 {
        position: relative; 定位模式
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

绝对定位(absolute)：

移动的时候是依照自己的父元素来移动位置的，如果没有父元素就会依照游览器文档来移动位置

需要子元素约束在父元素内，父元素就需要加定位，不然子元素会依照游览器我的为移动位置

如果祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

绝对定位不在占有原先的位置

    元素 {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

子绝父相：子元素加绝对定位，父元素加相对定位(绝对定位不占据原来的位置，相对定位占据原来的位置)

 

固定定位(fixed)：

固定于游览器显示的区域，不会随着页面的滚动而移动，固定定位是固定的

不占有原来的位置

    元素 {
        position: fixed;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

 

 

定位的顺序问题：