html折叠div悬浮,纯CSS实现DIV悬浮的示例代码(固定位置)

纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下:

fc3c96709876a4a2767cef31507677e8.png

实现代码:

DIV悬浮示例-纯CSS实现

/*设置了高度,可以上下滚动*/

body {

height: 1800px;

background:#dddddd;

}

/*div通用样式*/

div{

background: #1a59b7;

color:#ffffff;

overflow: hidden;

z-index: 9999;

position: fixed;

padding:5px;

text-align:center;

width: 175px;

height: 22px;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

/*右上角*/

div.right_top{

right: 10px;

top: 10px;

}

/*右下角*/

div.right_bottom{

right: 10px;

bottom: 10px;

}

/*屏幕中间*/

div.center_{

right: 45%;

top: 50%;

}

/*左上角*/

div.left_top{

left: 10px;

top: 10px;

}

/*左下角*/

div.left_bottom{

left: 10px;

bottom: 10px;

}

我是右上角悬浮的div
我是右下角悬浮的div
我是屏幕中间悬浮的div
我是左上角悬浮的div
我是左下角悬浮的div

到此这篇关于纯CSS实现DIV悬浮的示例代码(固定位置)的文章就介绍到这了,更多相关CSS DIV悬浮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值