CSS網(wǎng)頁(yè)固定左右的方法

在CSS中，我們可以使用position屬性來(lái)固定網(wǎng)頁(yè)元素，要想固定左右，我們需要將position屬性設(shè)置為relative或absolute。

1、使用relative定位

當(dāng)我們使用relative定位時(shí)，元素會(huì)相對(duì)于其正常位置進(jìn)行定位，我們可以通過(guò)設(shè)置left和right屬性來(lái)固定元素的左右位置。

div {
  position: relative;
  left: 50px;
  right: 100px;
}

在上面的代碼中，div元素會(huì)相對(duì)于其正常位置向右移動(dòng)100px，向左移動(dòng)50px。

2、使用absolute定位

當(dāng)我們使用absolute定位時(shí)，元素會(huì)相對(duì)于其***近的已定位祖先元素進(jìn)行定位，如果沒(méi)有已定位的祖先元素，那么元素會(huì)相對(duì)于初始包含塊進(jìn)行定位，我們可以通過(guò)設(shè)置top、bottom、left和right屬性來(lái)固定元素的四個(gè)方向位置。

div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50px;
  right: 100px;
}

在上面的代碼中，div元素會(huì)相對(duì)于其***近的已定位祖先元素或初始包含塊進(jìn)行定位，并向右移動(dòng)100px，向左移動(dòng)50px。

需要注意的是，如果我們同時(shí)使用top和bottom屬性，那么元素的height會(huì)被設(shè)置為0，因?yàn)樵貢?huì)被拉伸到包含塊的頂部和底部，在實(shí)際應(yīng)用中，我們需要根據(jù)實(shí)際情況選擇使用relative還是absolute定位。