CSS position屬性：定義HTML元素的定位方式

一、什麼是position屬性

CSS position屬性是用來定義HTML元素的定位方式的，它有四個屬性值：static（默認值）、relative、absolute、fixed。通過設置不同的位置屬性值、top、right、bottom、left屬性，可以讓元素按照我們想要的位置進行定位。

二、position屬性的四個屬性值

1. static：

static是默認屬性值，也就是說，如果我們沒有設置元素的position屬性的值時，默認是static。

在static的狀態下，top、right、bottom、left這些屬性都沒有任何作用，元素按照默認的位置放置在HTML文檔流中。

#box{
  position: static; //默認屬性值，可以不寫
}

2. relative：

相比於static，relative屬性值使得我們可以通過top、right、bottom、left屬性，將元素相對自身的初始位置進行移動。

#box{
  position: relative;
  top: 10px; 
  left: 20px;
}

3. absolute：

absolute屬性值可以讓元素脫離文檔流，相對於祖先元素（即其上一級並且設置為非static屬性值）進行定位。

#parent{
  position: relative;
}
#child{
  position: absolute;
  top: 50px;
  left: 50px;
}

4. fixed：

fixed屬性值是相對於瀏覽器窗口進行定位，元素的位置不會隨着滾動條的滾動而改變。

#box{
  position: fixed;
  top: 0;
  left: 0;
}

三、如何居中一個div

1.水平居中：

想要讓一個div水平居中，可以通過設置它的margin-left和margin-right為auto實現。

#box{
  width: 200px;
  height: 200px;
  background-color: orange;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

2.垂直居中：

垂直居中有多種實現方式，以下列舉兩種:

（1）通過設置absolute和transform屬性值實現：

#parent{
  position: relative;
}
#child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

（2）通過設置display:flex屬性值實現：

#parent{
  display: flex;
  align-items: center;
  justify-content: center;
}
#child{
  width: 200px;
  height: 200px;
  background-color: yellow;
}

四、兼容性問題

1. IE 6或更早的版本不支持fixed屬性值。

2. 在父元素沒有設置定位屬性時，子元素的絕對定位可能會受到body或html的影響，因此請務必設置父元素的定位屬性值。

3. z-index屬性值的問題。

由於css的堆疊順序，父元素會覆蓋相對於其定位的子元素，因此應當為子元素設置z-index屬性值，將其置於父元素的上面。

#parent{
  position: relative;
}
#child{
  width: 200px;
  height: 200px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

五、總結

position屬性是CSS中一種非常強大的定位方式，它可以讓HTML元素按照我們想要的位置進行定位，並有多個屬性值可以進行選擇。在使用時需要注意兼容性問題、設置父元素的定位屬性值以及z-index屬性值的問題，這些問題在實際開發中應該是比較常見的，因此需要特別注意。