定位

定位

position 属性规定应用于元素的定位方法的类型

static：HTML 元素的默认值

    #div1{
        background-color: red;
        position: static;
    }

 

relative：相对定位元素的定位是相对其正常位置（相对于原位置上下左右偏移）

    #div1{
        background-color: red;
        position: relative;
        top: -10px;
    }
    #div2{
        background-color: yellow;
        position: relative;
        bottom: -10px;
    }
    #div3{
        background-color: blue;
        position: relative;
        left: -10px;
    }
    #div4{
        background-color: pink;
        position: relative;
        right: -10px;
    }

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于body

    #father {
        margin-top: 100px;
        border: 1px solid black;
        height: 800px;
        position: relative;
    }

    #div1 {
        background-color: red;
        position: absolute;
        top: 10px;
    }

fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

    #div1 {
        background-color: red;
        position: fixed;
        top: 100px;
        left: 100px;
    }