position of css

relative：元素在显示时，相对自己本来的位置向下或者向右偏移指定数值，但元素本身并不脱离文档流，也就说后面的元素还认为此元素在原来的位置，所以会排列在此元素原本位置的后面（但会造成覆盖）。
absolute：以最近的已经定位的祖先元素为基准进行偏移（如果没有这样的祖先元素则以浏览器窗口为基准），元素本身脱离文档流，也就说后面元素认为此元素不存在，所以会占据此元素原来的位置（但会造成覆盖，脱离文档流后就不具有块级元素独占一行的性质了）。
fixed：和绝对定位类似也会脱离文档流，但总是以浏览器窗口为基准，而且位置不会随着滚动条移动。

child1: relative

child2: absolute

child3: fixed

    <style>
        #father {
            border: 1px solid lightgray;
            height: 400px;
            width: 400px;
            position: relative;
        }
        #child1 {
            border: 1px solid lightgray;
            background-color: lightpink;
            opacity: 0.3;
            height: 200px;
            width: 200px;
            position: relative;
            top: 0;
            left: 0;
        }
        #child2 {
            border: 1px solid lightgray;
            background-color: lightgreen;
            opacity: 0.3;
            height: 200px;
            width: 200px;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        #child3 {
            border: 1px solid lightgray;
            background-color: lightskyblue;
            opacity: 0.3;
            height: 200px;
            width: 200px;
            position: fixed;
            top: 400px;
            left: 400px;
        }
    </style>
    <div id="father">
            <div id="child1">child1: relative</div>
            <div id="child2">child2: absolute</div>
            <div id="child3">child3: fixed</div>
    </div>

猜你喜欢