使用CSS中的position屬性定位網頁元素

一、相對定位(position: relative)

相對定位是相對於元素原來的位置來進行定位，使用top、bottom、left、right屬性來調整元素位置。

    <div style="position: relative; top: 50px; left: 20px;">
        <p>這是一個相對定位的元素</p>
    </div>

在上面的示例中，使用position: relative聲明元素為相對定位，然後使用top: 50px和left: 20px將元素相對原來的位置向下移動50像素，向右移動20像素。

二、絕對定位(position: absolute)

絕對定位是相對於其最近的非static定位的父元素進行定位，如果沒有非static定位的父元素，則相對於文檔進行定位。同樣也可以使用top、bottom、left、right屬性來調整元素位置。

    <div style="position: relative;">
        <div style="position: absolute; top: 50px; left: 20px;">
            <p>這是一個絕對定位的元素</p>
        </div>
    </div>

在上面的示例中，使用position: relative聲明父元素為相對定位，然後在子元素中使用position: absolute聲明為絕對定位，再使用top: 50px和left: 20px將元素相對於父元素向下移動50像素，向右移動20像素。

三、固定定位(position: fixed)

固定定位是相對於瀏覽器窗口進行定位，也可以使用top、bottom、left、right屬性來調整元素位置。

    <div style="position: fixed; top: 50px; right: 20px;">
        <p>這是一個固定定位的元素</p>
    </div>

在上面的示例中，使用position: fixed聲明元素為固定定位，然後使用top: 50px和right: 20px將元素相對於瀏覽器窗口向下移動50像素，向左移動20像素。

四、粘性定位(position: sticky)

粘性定位是相對於滾動容器進行定位，需要設置一個粘性位置，當滾動容器滾動到該位置時，元素就會變為固定定位。

    <div style="position: sticky; top: 50px;">
        <p>這是一個粘性定位的元素</p>
    </div>

在上面的示例中，使用position: sticky聲明元素為粘性定位，然後使用top: 50px將元素相對於滾動容器向下移動50像素，並將該位置作為粘性位置。

五、靜態定位(position: static)

靜態定位是元素的默認定位方式，元素按照文檔樣式從上至下依次排列。

    <p>這是一個靜態定位的元素</p>

在上面的示例中，未聲明任何定位方式，元素將使用默認的靜態定位。