如何使用CSS控制DIV懸浮在頁面左側或右側
在進行前端頁面開發(fā)時，經常會遇到需要將某個`div`固定在頁面的左側或右側的情況。下面將介紹如何通過CSS實現(xiàn)這一效果。固定在左側的DIV首先，在HTML頁面中新建一個`div`，給它一個名為`lef
在進行前端頁面開發(fā)時，經常會遇到需要將某個`div`固定在頁面的左側或右側的情況。下面將介紹如何通過CSS實現(xiàn)這一效果。
固定在左側的DIV
首先，在HTML頁面中新建一個`div`，給它一個名為`left`的類名，并在樣式表中設置相關屬性。其中，關鍵屬性是`position: fixed;`，以下是示例代碼：
```html
```
```css
.left {
position: fixed;
left: 0;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 垂直居中 */
background-color: f2f2f2;
width: 200px;
padding: 20px;
}
```
保存后，查看頁面效果，你將看到`div`始終懸浮在頁面的左側。
固定在右側的DIV
接著，我們來創(chuàng)建一個懸浮在頁面右側的`div`。在HTML中新建一個`div`，給它一個名為`right`的類名，并復制左側`div`的樣式。只需將`left: 0;`改為`right: 0;`即可實現(xiàn)右側懸浮效果。
```html
```
```css
.right {
position: fixed;
right: 0;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 垂直居中 */
background-color: f2f2f2;
width: 200px;
padding: 20px;
}
```
保存后，查看頁面效果，你會注意到新增的右側`div`也會始終懸浮在頁面右側。
添加高度以顯示懸浮效果
有時候初始頁面看不到懸浮效果，這時可以給`body`元素設置一個高度。通過設置高度，頁面就可以滾動，從而展現(xiàn)出懸浮在左右側的`div`。
```css
body {
height: 2000px; /* 設置一個足夠長的高度 */
}
```
保存后，當頁面被下拉到中間部分時，你會發(fā)現(xiàn)無論向上滾動還是向下滾動，懸浮的`div`始終保持在頁面的左右兩側。這樣，你就成功實現(xiàn)了使用CSS控制`div`懸浮在頁面左側或右側的效果。