元素的相對定位與絕對定位

枕夢發表於2017-04-28
採用相對定位的元素，會相對於它原來的位置進行定位
                     並且，元素原始佔用的空間不會被其他元素佔用

採用絕對定位的元素，會尋找離它最近的採用了定位的父元素，並以他為座標進行定位
                      如果所有的父元素都沒有使用定位，則以body為座標進行定位
                      並且，元素佔用的空間會被其他元素佔用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: #bce8f1;
            position: absolute;
            top: 40px;
            left: 40px;
        }
        #right{
            width: 200px;
            height: 200px;
            background-color: #ffbc82;
        }
    </style>
    <title>CSS定位</title>
</head>
<body>

<div style="position: relative;top: 40px;left: 40px">
    <div>
        <div>
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </div>
</div>
</body>
</html>

相關文章