元素默认的定位方式，遵从基本的html:相对定位，相对哪个对象

对象

html是根据文档流从上到下fixed 定位内容可滑动，从左到右排列对象/元素。

static：元素的默认定位方式，遵循基本的html布局规则

relative：相对定位，相对于哪个对象？相对于元素本身的位置

    div{
        width:300px;

        height:200px;
    }
    .div5{
        position:relative;

        left:20px;//往下方偏移20px
        top:30px;//往右边偏移20px
    }

650) this.width=650;” title=”relative” src=”https://s1.51cto.com/wyfs02/M02/9E/99/wKioL1mT4Y7C_UJQAAANwbcjT4o416.png-wh_500x0-wm_3-wmp_4-s_657572622.png” />

图中实体框为div5的原始位置，虚线框6为相对定位后的位置，但元素本身在文档流中占据实体框的位置，下一个元素div7为基础放在实体框上作为参考。

absolute：绝对定位，出文档流。绝对定位也有参考目标！如果父元素定位相对/绝对/固定，则以父元素为参考目标fixed 定位内容可滑动，否则以body为参考目标

fixed：绝对定位，以浏览器窗口为参考目标。

另外，浏览器窗口html一般会比body大9px左右，可以通过设置body的margin来消除。

另外，z-index参数只有在定位方式为相对或绝对时才会生效

本文来自“12257285”博客，请保留此出处

关于定位浮动、静态、相对、绝对、固定的 CSS