在進(jìn)行前端頁(yè)面開發(fā)時(shí)，經(jīng)常會(huì)遇到需要將某個(gè)`div`固定在頁(yè)面的左側(cè)或右側(cè)的情況。下面將介紹如何通過CSS實(shí)現(xiàn)這一效果。固定在左側(cè)的DIV首先，在HTML頁(yè)面中新建一個(gè)`div`，給它一個(gè)名為`lef

在進(jìn)行前端頁(yè)面開發(fā)時(shí)，經(jīng)常會(huì)遇到需要將某個(gè)`div`固定在頁(yè)面的左側(cè)或右側(cè)的情況。下面將介紹如何通過CSS實(shí)現(xiàn)這一效果。

固定在左側(cè)的DIV

首先，在HTML頁(yè)面中新建一個(gè)`div`，給它一個(gè)名為`left`的類名，并在樣式表中設(shè)置相關(guān)屬性。其中，關(guān)鍵屬性是`position: fixed;`，以下是示例代碼：

```html

```

```css

.left {

position: fixed;

left: 0;

top: 50%; /* 垂直居中 */

transform: translateY(-50%); /* 垂直居中 */

background-color: f2f2f2;

width: 200px;

padding: 20px;

}

```

保存后，查看頁(yè)面效果，你將看到`div`始終懸浮在頁(yè)面的左側(cè)。

固定在右側(cè)的DIV

接著，我們來(lái)創(chuàng)建一個(gè)懸浮在頁(yè)面右側(cè)的`div`。在HTML中新建一個(gè)`div`，給它一個(gè)名為`right`的類名，并復(fù)制左側(cè)`div`的樣式。只需將`left: 0;`改為`right: 0;`即可實(shí)現(xiàn)右側(cè)懸浮效果。

```html

```

```css

.right {

position: fixed;

right: 0;

top: 50%; /* 垂直居中 */

transform: translateY(-50%); /* 垂直居中 */

background-color: f2f2f2;

width: 200px;

padding: 20px;

}

```

保存后，查看頁(yè)面效果，你會(huì)注意到新增的右側(cè)`div`也會(huì)始終懸浮在頁(yè)面右側(cè)。

添加高度以顯示懸浮效果

有時(shí)候初始頁(yè)面看不到懸浮效果，這時(shí)可以給`body`元素設(shè)置一個(gè)高度。通過設(shè)置高度，頁(yè)面就可以滾動(dòng)，從而展現(xiàn)出懸浮在左右側(cè)的`div`。

```css

body {

height: 2000px; /* 設(shè)置一個(gè)足夠長(zhǎng)的高度 */

}

```

保存后，當(dāng)頁(yè)面被下拉到中間部分時(shí)，你會(huì)發(fā)現(xiàn)無(wú)論向上滾動(dòng)還是向下滾動(dòng)，懸浮的`div`始終保持在頁(yè)面的左右兩側(cè)。這樣，你就成功實(shí)現(xiàn)了使用CSS控制`div`懸浮在頁(yè)面左側(cè)或右側(cè)的效果。