position

position属性

1. static：（静态定位）默认值，元素出现在正常的流中

2. relative: （相对定位）脱离正常的文本流，但其在文本流中的位置依然存在。

3. absolute: （绝对定位）相对于static定位意外的第一个父元素定位

<style>
    .div3 {
        position: relative;
        width: 300px;
        height: 300px;
        background: red;
    }

    .div1 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: yellow;
        top: 20px;
        left: 20px;
    }

    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: green;
        top: 20px;
        left: 20px;
    }

    .div4 {
        position: relative;
        width: 300px;
        height: 300px;
        background: pink;
    }

    .div5 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: palegoldenrod;
        top: 20px;
        left: 20px;
    }

    .div6 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: goldenrod;
        top: 20px;
        left: 20px;
    }

    .div7 {
        position: fixed;
        width: 300px;
        top: 300px;
        left:300px;
        height: 300px;
        background: gray;
    }

    .div8 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: purple;
        top: 20px;
        left: 20px;
        z-index: 99999;
    }

    /* .div9 {
        position: absolute;
        width: 100px;
        height: 100px;
        background: goldenrod;
        top: 20px;
        left: 20px;
    } */
</style>

 <div class="div3">
        <div class="div1">1</div>
        <div class="div2">2</div>
    </div>

    <div class="div4">
        <div class="div5">4
            <div class="div6">5</div>
        </div>
    </div>

    <div class="div7">
        <div class="div8">7
        </div>
    </div>

结果.png

4. fixed:（固定定位）相对于浏览器进行定位不论窗口滚动与否，元素都会留在那个位置