細說CSS中的absolute和relative定位

一、定位的基礎概念

在談及CSS中的absolute和relative定位之前，我們先來了解一下CSS中的定位的基礎概念。

CSS中的定位指的是根據元素在文檔流中的位置，將元素放置在指定的位置上。常見的定位有三種：static、relative、和absolute。其中static是默認的定位方式，也就是元素在文檔流中的位置不會發生變化，而relative和absolute則會觸發定位。

不同的定位方式觸發的定位是不同的，我們將在下面的內容中詳細介紹。

二、relative定位詳解

相對定位（relative）指的是元素相對於其在文檔流中的位置進行定位。

相對定位會觸發position屬性，使元素成為定位元素。相對於該元素在文檔流種的位置，通過 top、right、bottom、left 屬性可以控制元素向上、右、下、左移動的距離。例如：

  
    .box {
      position: relative;
      top: -20px;
      left: 30px;
    }
  

這樣，.box元素向上移動20像素，向左移動30像素。

相對定位對其他元素的位置不會造成影響，其他元素和 .box 之間的距離不會改變。

三、absolute定位詳解

絕對定位（absolute）指的是元素相對於最近的已經定位的祖先元素進行定位。

絕對定位會觸發position屬性，使元素成為定位元素。通過 top、right、bottom、left 屬性可以控制元素相對於其已經定位的祖先元素的上、右、下、左移動的距離。例如：

  
   .box {
     position: absolute;
     top: 20px;
     left: 30px;
   }
  

這樣，.box元素相對於其已經定位的祖先元素向上移動20像素，向左移動30像素。

如果沒有找到已經定位的祖先元素，則相對於文檔定位。

四、absolute和relative的比較

absolute和relative的定位方式既有相同點，也有不同點。下面我們將二者進行比較：

1. 相同點

相同點在於二者都可以設置top、right、bottom、left屬性來改變元素的位置。

2. 不同點

不同點在於二者不同的定位方式，導致改變其他元素的位置的方式不同。relative定位的元素移動改變了周圍元素的位置，而absolute定位的元素不會影響周圍元素的位置

五、小結

CSS中的絕對定位（absolute）和相對定位（relative）分別相對於已經定位的祖先元素和文檔定位，它們能夠控制元素位置，並且存在不同的定位方式。需要注意的是，relative定位會改變其他元素的位置，而absolute定位則不會。

代碼實例：

 我是一個相對定位的元素
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/245283.html