如何使用CSS控制DIV悬浮在页面左侧或右侧

在进行前端页面开发时，经常会遇到需要将某个`div`固定在页面的左侧或右侧的情况。下面将介绍如何通过CSS实现这一效果。

固定在左侧的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

接着，我们来创建一个悬浮在页面右侧的`div`。在HTML中新建一个`div`，给它一个名为`right`的类名，并复制左侧`div`的样式。只需将`left: 0;`改为`right: 0;`即可实现右侧悬浮效果。

```html

```

```css

.right {

position: fixed;

right: 0;

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

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

background-color: f2f2f2;

width: 200px;

padding: 20px;

}

```

保存后，查看页面效果，你会注意到新增的右侧`div`也会始终悬浮在页面右侧。

添加高度以显示悬浮效果

有时候初始页面看不到悬浮效果，这时可以给`body`元素设置一个高度。通过设置高度，页面就可以滚动，从而展现出悬浮在左右侧的`div`。

```css

body {

height: 2000px; /* 设置一个足够长的高度 */

}

```

保存后，当页面被下拉到中间部分时，你会发现无论向上滚动还是向下滚动，悬浮的`div`始终保持在页面的左右两侧。这样，你就成功实现了使用CSS控制`div`悬浮在页面左侧或右侧的效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。