前端页面的定位(position)

什么是定位

将元素放到指定位置上，一旦使用定位该元素便会从文档中脱离出来，进入另一个层面。

同时使用定位必须要和偏移结合起来

偏移

偏移分为四种

1）top:距离容器顶部的距离

2）right：距离容器右边的距离

3）bottom：距离容器底部的距离

4）left：就李荣启右边的距离

四种定位

1）静态定位(static)

    默认值，标准文档流的方式，流式布局，块状元素从上往下，行内元素从左往右

2）相对定位(relative)

    相对于本身原有的位置，发生了偏移。没有脱离文档流，自身的位置不会被其它元素占据（没有脱离文档流）

<style>
        
        #d1{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background-color: aqua;
        }
        #d2{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid yellow;
            position: relative;
            top: 20px;
            left: 20px;
        }
        #d3{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: blueviolet;
        }
    </style>


<!-- 相对定位 -->
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>

3）绝对定位(absolute)（完全脱离文档流）

先判断父元素或祖先元素有没有进行定位：若进行定位，则以已经定位的父元素或祖先元素为基准进行偏移；若没有进行定位，则以浏览器窗口的左上角原点为基准进行偏移。

4）固定定位(fixed)（完全脱离文档流）

将元素固定在页面中的指定位置上，不随页面的滚动而滚动

例如：百度的登录页面、支付页面等