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

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

固定在左側(cè)的DIV

首先，在HTML頁面中新建一個`div`，給它一個名為`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;

}

```

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

固定在右側(cè)的DIV

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

```html

```

```css

.right {

position: fixed;

right: 0;

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

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

background-color: f2f2f2;

width: 200px;

padding: 20px;

}

```

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

添加高度以顯示懸浮效果

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

```css

body {

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

}

```

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