纯CSS实现DIV悬浮(固定位置)

最新推荐文章于 2019-10-22 21:34:13 发布
最新推荐文章于 2019-10-22 21:34:13 发布
阅读量10w+ 收藏 41
点赞数 16
分类专栏： css 文章标签： div悬浮 纯css 兼容常用浏览器 div实现悬浮 div固定位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssxueyi/article/details/80831644
版权
这篇博客介绍了如何使用纯CSS实现DIV在页面上的悬浮效果，包括右上角、右下角、屏幕中间、左上角和左下角的定位，兼容多种常见浏览器，如IE8、360、Firefox、Chrome等。
摘要由CSDN通过智能技术生成

        纯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;

最低0.47元/天 解锁文章
ssxueyi
关注
专栏目录
html+css 实现悬浮按钮
宝码香车的博客
07-27 1185
给每一个按钮添加一个hover效果，并给按钮的父容器添加一个perspective透视属性，当hover时改变每个按钮的transform和box-shadow达到效果。可复制代码，查看效果。
div固定悬浮（左侧、右侧、任意相对位置）
qq_38370545的博客
04-10 2766
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
jquery.floatdiv 浮动层固定位置
04-29
jquery.floatdiv 浮动层固定位置 /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv("righttop"); //居中 $("#id").floatdiv("middle");
div的悬浮和阴影效果
yizhi_biu的博客
01-08 3255
基本用法 box-shadow:2px 2px 5px #000; 2px:离左侧的距离，2px离上侧的距离，5px阴影的宽度，#000阴影的颜色 box-shadow:0px 0px 10px #000; 内阴影 box-shadow:inset 2px 2px 5px #000; inset表示内阴影，其余参数同上 阴影扩展长度值 box-shadow:0px
css简易的进度条
qq_45723045的博客
10-22 847
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...
悬浮固定DIV悬浮固定DIV
11-21
悬浮固定DIV_demo,http://blog.csdn.net/ymruseuse/article/details/78589480
div悬浮固定
ymruse的博客
11-21 3200
悬浮相对固定
HTML定位——绝对定位和相对定位、固定定位
dieqiongxi4115的博客
09-22 795
1、绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。 position：absolute； 1 <!DOCTYPE html> 2 <html...
jQuery插件实现DIV浮动在页面固定位置中
04-19
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1874189
div浮于页面固定位置、展开与隐藏、锚点定位
04-19
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1879695
DIV悬浮-纯CSS实现.html
06-27
纯CSS实现的DIV悬浮效果，兼容常用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。
jquery.实现div悬浮
10-30
div悬浮实例
悬浮DIV层(javascript实现)
06-24
当页面滚动条滚动到某个高度时,div开始悬浮,当页面滚动到底部时停止浮动,高度记录为最后的浮动高度.
CSS实现的div悬浮框并且兼容IE6的样式
09-25
本篇将详细介绍如何使用CSS实现一个兼容IE6的div悬浮框。 首先，我们需要理解CSS中的定位属性`position`。在CSS中，`position`属性有`static`（默认值）、`relative`、`absolute`和`fixed`等值。在这个示例中，我们...
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
09-25
纯CSS实现右侧底部悬浮效果是一种不需要JavaScript即可完成的网页设计技巧，它主要用于将网站的联系信息、社交媒体图标或者客服咨询等按钮固定在浏览器窗口的右侧底部位置。这类悬浮效果可以使用户的交互更加便捷，...
纯CSS结合DIV实现的右侧底部简洁悬浮效果
09-25
右侧浮动效果，最早有QQ联系面板，对联广告等，大多数都是基于Javascript实现的动态效果，今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果
div层的固定位置浮动
04-12 299
.fixed { right:20px; top:10px; +position:absolute; +top:expression(eval(document.body.scrollTop)+10); } 在线客服 x 本文转自 http://www.boogu.com/caiContent_27956.html
vue div悬浮固定
最新发布
05-25
可以使用CSS中的position属性来实现vue div悬浮固定。具体实现方法如下： 1. 首先，在需要悬浮固定的div标签中添加一个class类名，例如"fixedDiv"。 2. 在CSS文件中，为这个类名添加如下样式： ```css .fixedDiv{ position: fixed; top: 50px; /* 悬浮的距离 */ left: 0; right: 0; } ``` 其中，position: fixed; 表示固定定位，top: 50px; 表示距离顶部50像素，left: 0; 和 right: 0; 表示悬浮div的左右两侧距离屏幕边缘为0。 3. 在vue组件中，将需要悬浮固定的div标签添加上这个class类名，例如： ```html <template> <div class="wrapper"> <div class="fixedDiv"> // 悬浮固定的内容 </div> // 其他内容 </div> </template> <script> export default { // 组件代码 } </script> <style scoped> .fixedDiv{ position: fixed; top: 50px; /* 悬浮的距离 */ left: 0; right: 0; } </style> ``` 这样就可以实现vue div悬浮固定了。需要注意的是，如果悬浮的内容高度超过了屏幕高度，需要添加滚动条样式。可以在CSS中为悬浮div的父元素添加如下样式： ```css .wrapper{ height: 100vh; /* 屏幕高度 */ overflow-y: scroll; /* 竖向滚动条 */ } ``` 这样就可以实现悬浮div内容超出屏幕高度时，可以通过滚动条滚动的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ssxueyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值