怎么新建MySQL数据库
发布时间：2021-04-26
作者：admin
阅读：706
阅读：706
CSS div悬浮效果怎么写？在做前端开发时，我们有些需求需要div悬浮，那么div悬浮效果如何实现呢？这篇文章就给大家介绍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悬浮效果的介绍，上述有具体代码供大家参考，希望大家学习有帮助，更多CSS内容大家可以关注其他文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理