使用relative position css實現網頁元素定位

一、relative position 是什麼

relative position 與 static position 最大的區別是可以通過top、right、bottom、left來設置其相對位置，而 static position 是默認的正常布局方式。

當元素使用relative position時，它的位置偏移量相對於它所在的正常位置而定；如果沒有提供top、right、bottom和left屬性，則為0。

請看下面這個例子：

    <style>
        #example {
            position: relative;
            left: 30px;
            top: 50px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
    <div id="example">
        <p>使用relative position css實現網頁元素定位</p>
    </div>

二、使用relative position實現網頁元素定位的步驟

相信大家在開發過程中都會遇到各種布局問題，而使用relative position可以很好的解決一些元素的位置定位問題，下面是使用relative position實現網頁元素定位的步驟：

1、給需要定位的元素設置position:relative;

2、使用top、right、bottom、left屬性調整元素的位置；

請看下面這個例子：

    <style>
        .container {
            width: 400px;
            height: 400px;
            background-color: #ddd;
            position: relative;
        }
        .box {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
    <div class="container">
        <div class="box"></div>
    </div>

三、relative position和absolute position的區別

我們在定位HTML元素時，可以使用兩種方法：absolute position和relative position，為什麼要使用這兩種position呢？它們各有什麼特點和優缺點呢？

1、absolute position

使用absolute position，元素會脫離正常流，完全根據位置屬性來定位。當包含該元素的 parent element 設置position: relative時，absolute position的元素會相對於 parent element 定位，否則它會相對於文檔定位。

請看下面這個例子：

    <style>
        #parent {
            position: relative;
            height: 300px;
            border: 1px solid #000;
            padding: 10px;
        }
        #box {
            position: absolute;
            left: 50px;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
    <div id="parent">
        <div id="box"></div>
    </div>

2、relative position

使用relative position，元素還在正常流中，也就是說它仍然佔用原來的空間，只是通過調整其位置屬性來改變它的位置，而絕對定位元素與之不同，它會完全脫離文檔流。

請看下面這個例子：

    <style>
        #parent {
            position: relative;
            height: 300px;
            border: 1px solid #000;
            padding: 10px;
        }
        #box {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
    <div id="parent">
        <div id="box"></div>
    </div>

四、小結

本文介紹了使用relative position css實現網頁元素定位的方法和步驟，同時也介紹了相對位置與絕對位置的區別，非常適合需要用到定位功能的前端開發工程師。