css固定定位，即悬浮效果

最新推荐文章于 2023-09-21 11:00:23 发布
最新推荐文章于 2023-09-21 11:00:23 发布
阅读量1.3w 收藏 16
点赞数
CC 4.0 BY-SA版权
分类专栏： 1: HTML @ CSS 文章标签： css html border div 浏览器 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ddcatlee/article/details/2070072
本文介绍如何使用CSS的position:fixed属性实现元素的固定定位，即悬浮效果。文章提供了具体的HTML和CSS代码示例，并针对IE6及以下版本浏览器提供了解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css固定定位，即悬浮效果（例如对联广告），不用js，css中"position:fixed;"即可。
position:fixed; 以视口为包含块，因此在浏览器窗口内固定。
ie 6.0不支持，因此采用相对于html元素的绝对定位。

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#fixedLayer {
width:100px;
line-height:50px;
background: #FC6;
border:1px solid #F90;
position:fixed;
left:10px;
top:10px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
#fixedLayer {
position:absolute;
}
</style>
<![endif]-->
</head>

<body>
<div id="fixedLayer">固定不动</div>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
<p>dd</p>
</body>
</html>
 
CSS元素动画篇：鼠标悬浮时特效，常见6种边框类悬浮特效
wuhen_n的博客
05-01 960
本文主要介绍了日常开发中6种常见的鼠标悬浮边框类特效，包括边框展示、边框外浮、边框闪现、元素空心、元素裁剪和边框圆角。
使用css设置DIV固定悬浮
Zhu_daye的博客
10-17 6310
照旧先阐述问题，项目中需要这样一个功能。有一个按钮的设计是需要一直呆在页面右上角。 举一反三，实现右下、左上、左上、中间的悬浮效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=...
悬浮固定DIV悬浮固定DIV
11-21
悬浮固定DIV_demo,http://blog.youkuaiyun.com/ymruseuse/article/details/78589480
固定悬浮css属性
mufengdeying111的博客
12-24 229
固定悬浮 position: sticky
css 固定悬浮
鑫的专栏
01-26 719
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> jquery.slidingdrawer Demo function tt() { $(".drawer-content").toggle(function() {
js 固定悬浮效果
蜗牛的精神
04-09 2771
(function($){ var ele_fix = $("#div_right"); //浮动窗口 var _main = $(".main"); //浮动区域 var ele_offset_top = ele_fix.offset().top; //浮动区域高度 $(window).scroll(function(){ var scro_top = $(thi
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
09-25
通过使用固定定位属性将侧边栏固定在视口的指定位置，并通过CSS伪类实现悬停效果，无需额外的JavaScript代码即可完成一个简洁且实用的悬浮侧边栏。这种技术可以广泛应用于各种网站，特别是那些需要频繁与用户互动、...
CSS简单实现网页悬浮效果（对联广告）
09-27
<title>CSS固定定位示例 <style type="text/css"> * { padding: 0; margin: 0; } #fixedLayer { width: 100px; line-height: 50px; background: #FC6; border: 1px solid #F90; position: fixed; left:...
css3实现网页悬浮窗功能
03-13
CSS3（层叠样式表第三版）提供了丰富的样式和定位功能，使得实现网页悬浮窗变得相对简单。本文将详细介绍如何使用CSS3来创建一个网页悬浮窗，并探讨相关知识点。 首先，我们需要理解CSS3中的定位属性。在CSS3中，有...
CSS javascript 结合实现悬浮固定菜单效果
10-23
CSS主要用于设置菜单的样式，如高度、背景颜色、宽度等，以及菜单在未达到视口顶部前的位置是相对定位（position: relative），当滚动条达到菜单原始位置时，菜单位置变为固定定位（position: fixed）。这样就保证了...
css实现标签固定悬浮在某个位置(position:fixed)
热门推荐
Sunday97的博客
08-12 1万+
关键用到的就是固定定位（position:fixed）和层叠属性（z-index） <div class="fix-box"></div> <style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; } </style> 知识点详细解析 position:fixed： 盒子将脱离原来的文本流，进入到新
css悬浮效果
11-22
悬浮效果
很简单的纯CSS固定漂浮层
03-17
很简单的固定漂浮层，纯CSS实现层固定，自由灵活
css+div悬浮.zip
09-02
利用CSS+div实现右侧底部悬浮效果 利用CSS+div实现右侧底部悬浮效果
CSS - 快速实现悬浮吸顶，当页面滑动一定距离时固定吸附在顶部（position: sticky）
资深程序员
09-13 2400
* 核心属性,必须设置top,left或者bottom,right位置 *//* 或: bottom: xx, right: xx *//* 子节点(悬浮吸顶外层容器) */当被其他高层级容器遮挡时，请设置。/* 根节点(父容器) */文件，一键复制运行起来。
【css】如何实现自定义滚动悬浮置顶、固定表头
最新发布
hzxOnlineOk的博客
09-21 5375
到一个元素时，如果内容超出容器的尺寸，则会显示一个滚动条。与 scroll 不同的是，滚动条是以浮动的方式显示在内容上方，不会占用容器的空间。当应用于元素时，该元素在滚动时会固定在父容器的指定位置，直到滚动到达特定的位置或条件满足后，才会取消固定定位。这意味着，即使内容超出容器的高度，也不会显示滚动条或剪裁溢出的部分。：内容超出容器高度时，会根据需要设置是否显示滚动条，如果内容没有超出容器高度则不显示滚动条。：如果内容超出容器的高度，将显示滚动条，用户可以滚动查看超出的内容。：溢出的内容将被隐藏，不显示。
css悬浮显示元素
pscool的博客
04-19 5937
现在才明白hover悬浮时，显示元素的用法：hover表示状态，那.location:hover .city-list连起来写的意思就是选择类名是location的元素，并且这个元素正在处于鼠标悬浮状态 的 后代 且类名是city-list的元素，将这个元素的display改成block。 .location .city-list{ display: none; } /* 当鼠标移入到location时，让city-list显示 */ .location:hover .city-list{
html固定悬浮窗效果,js 固定悬浮效果实现思路代码
weixin_34570232的博客
06-04 843
(function($){var ele_fix = $("#div_right"); //浮动窗口var _main = $(".main"); //浮动区域var ele_offset_top = ele_fix.offset().top; //浮动区域高度$(window).scroll(function(){var scro_top = $(this).scrollTop(); //当前高...
固定悬浮框
kingfunhuang的专栏
03-09 502
js代码：$.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); element.css({ positi
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值