使用css 控制div悬浮在页面的左侧或者右侧

 时间:2026-04-22 22:58:19

1、新建一个html页面,在body标签里新建一个class位left 的div,并在style里面写div的相关属性,其中重要属性是position: fixed;相关代码如下图所示

使用css 控制div悬浮在页面的左侧或者右侧

2、保存后来看一下代码在页面上呈现的效果

使用css 控制div悬浮在页面的左侧或者右侧

3、前面我们写了悬浮在左侧,接下来再写一个悬浮在右侧,在body标签里新建一个class位right的div,复制left的样式,只需要将left:0,改为right:0即可

使用css 控制div悬浮在页面的左侧或者右侧

4、保存后来看一下加了right后,代码在页面上呈现的效果

使用css 控制div悬浮在页面的左侧或者右侧

5、目前看不出来悬浮的效果,接下来给body加一个高度

使用css 控制div悬浮在页面的左侧或者右侧

6、保存后,会发现页面可以下拉,把页面下拉到中间部分便可发现,div始终悬浮在左右侧

使用css 控制div悬浮在页面的左侧或者右侧

  • 在css中如何设置左浮动和右浮动?
  • 怎么让两个div在同一行
  • html怎样实现图片自动切换
  • 怎么让div居中
  • HTML代码如何去除超链接的下划线
  • 热门搜索
    小孩耳朵疼是怎么回事 水煮鱼的鱼片怎么切 东山岛怎么去 墙布怎么贴 爱奇艺怎么了 俄罗斯方块怎么玩 冷面怎么做 全世界都在演我怎么办 怎么清理c盘垃圾 蒸面条怎么做好吃