纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DIV悬浮示例-纯CSS实现</title>
<style type="text/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;
}
</style>
</head>
<body >
<div class="right_top"> 我是右上角悬浮的div</div>
<div class="right_bottom"> 我是右下角悬浮的div</div>
<div class="center_"> 我是屏幕中间悬浮的div</div>
<div class="left_top"> 我是左上角悬浮的div</div>
<div class="left_bottom"> 我是左下角悬浮的div</div>
</body>
</html>
纯CSS实现DIV悬浮(固定位置)相关推荐
- html 悬浮在固定位置,纯CSS实现DIV悬浮(固定位置)
[推荐]2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Sa ...
- css 让div悬浮,纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: DIV悬浮示例-纯C ...
- css 让div悬浮,css实现div悬浮不动效果
这在很多网站都常见,比如说美丽说,还有本博,css实现div悬浮不动效果很简单,效果图就如本站所示,实现css代码如下: CSS固定定位 { padding:0; margin:0; } div{ w ...
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
- 纯css在div上添加小三角
纯css在div上添加小三角 有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图 虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和b ...
- 纯css实现div同行显示
纯css实现div同行,效果如下(由有10余年前台工作经验的工程师指导): 代码如下(可以直接用): <html> <head> <style type="te ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.&quo ...
- 强迫症晚期患者:纯CSS实现div高度自适应浏览器。
我记得在学了网页自适应的内容后,每次写网页,力求宽高自适应.最后还是有一些困惑:写一个div给样式.(给定背景色和字体色是为了便于我们观察.) width:100%;background:white: ...
- 有趣且重要的css知识合集(1)纯css实现div左右拖拽效果
目前我看主流的都是用js来实现div拖拽效果,不过我个人觉得一直监听拖拽,会耗费很大的性能,毕竟监听盒子的宽高这些属性,都会触发浏览器的回流,并且我看了很多博客,他们是能用css实现div左右拖拽效果 ...
最新文章
- macos降级_macOS Big Sur如何降级
- 内蒙古电力交易对数据中心用电费用的影响分析
- Win10 Edge浏览器续航碾压火狐/Chrome
- idea连接svn_搭建本地虚拟(centos)svn服务器
- Oracle PL/SQL编程之变量
- 洛谷 | P1010 幂次方
- 算法笔记_167:算法提高 矩阵翻转(Java)
- android手机测试用例,Android手机测试用例-从事手机测试必备
- Mybatis if test中字符串比较
- Darabonba:多语言SDK开发终极解决方案
- LDA算法——线性判别
- IE浏览器不能使用window.open()的解决方案
- 牛客面经 | BAT、美团、360、滴滴新锐……2W字干货,这不仅仅是一篇面经
- kali进行arp断网攻击
- JS中国标准时间格式转换
- android 通话自动录音服务
- keil问题总结(方便以后查找问题)
- python中pip的使用 安装 升级 卸载包
- __builtin_offsetof()
- FPGA技术——FPGA的灵魂(FSM)你悟了吗?
热门文章
- CodeLite可以媲美Code::Blocks
- 如何安装谷歌浏览器驱动(Google Chromedriver)
- P16-Windows与网络基础-本地安全策略
- 混沌工程之ChaosToolkit使用之一删除K8s POD
- Python | 微信自动回复祝福语
- 混合云网络怎么组网搭建?
- 我的世界服务器java启动脚本_我的世界服务器开服bat文件分享 常见脚本
- [附源码]Java计算机毕业设计SSM电力公司员工安全培训系统
- 瞬间“友尽”的五大整蛊代码,快去坑你的小伙伴吧!
- HMC7044芯片配置总结