`
jordan_micle
  • 浏览: 245700 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

固定DIV|纯CSS实现

 
阅读更多

在网页开发的时候,经常需要页面上有一个固定的DIV,而且,希望随着滚动条的滚动这个固定的DIV不会刷新(抖动)。

 

下面来说一下纯CSS实现<div id="fix_d"></div>的固定方法。

 

1. 设置HTML,BODY的样式

 

html{overflow:auto; height:100%;}
body{overflow:auto; height:100%; margin:0 0 0 0;}

 

2. 设置DIV#fix_d的样式

 

#fix_d {
    position:absolute;

    top:50px;
    left:80px;
}

其中top和left用以控制DIV的位置。

 

兼容IE6.0+,FF,Chrome。

分享到:
评论

相关推荐

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    纯CSS实现的表格滚动条效果

    这个纯CSS实现的表格滚动条效果适用于那些希望提升用户体验,使数据展示更优雅的网站和应用程序。 请注意,以上CSS代码仅适用于基于Webkit内核的浏览器(如Chrome和Safari),对于Firefox和其他非Webkit浏览器,...

    纯css3实现横向瀑布流布局,横向瀑布流代码.zip

    在传统的瀑布流布局中,元素通常是垂直排列的,但在本案例中,我们将讨论如何使用纯CSS3实现横向瀑布流布局。 首先,要理解CSS3中实现这一布局的关键技术。主要是使用`flexbox`(弹性盒模型)或`grid`(网格布局)...

    纯CSS表头固定的实现代码

    然而,随着时间的推移,使用纯CSS实现表头固定的方案已被提出,并在互联网上流传。 纯CSS实现表头固定的常见做法是创建两个表格:一个作为表头,另一个作为数据体部分。表头使用thead标签来表示,而数据体部分则...

    纯CSS实现不固定大小div相对于body垂直居中效果

    这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 相对于body居中的另外一种写法 原理比较难以理解,这里只简单的说下如何使用: 1、在body的根目录下建立两个...

    纯css实现div容器内图片上下左右居中效果.zip

    本资源"纯css实现div容器内图片上下左右居中效果.zip"提供了一个使用纯CSS实现图片在div容器内完全居中的解决方案。下面将详细解释这一技术及其背后的原理。 首先,我们关注的是“纯CSS”方法,这意味着我们将不...

    纯css控制内容随滚动条滚动,可放任意位置

    在网页设计中,有时我们需要...总结来说,纯CSS实现的滚动固定元素是一种高效且易于理解的方法,适用于各种网页设计场景。通过掌握固定定位,开发者能够轻松地创建出随滚动条滚动并可自定义位置的效果,提升用户体验。

    用CSS3实现无限循环的无缝滚动的实例代码

    通过上述方法,我们可以用纯CSS实现无限循环的无缝滚动动画。这一技术不仅适用于简单的滚动显示,还可以扩展到更复杂的动画效果中。对于开发者而言,掌握CSS3中关于动画的这些高级用法,将有助于提升开发效率,并让...

    纯CSS实现箭头

    在网页设计中,纯CSS实现箭头是一种常见且实用的技术,可以用来创建各种导航、提示或者装饰元素。这里我们详细探讨如何使用CSS来创建箭头,以及提供的代码示例所展示的方法。 首先,CSS(层叠样式表)是用于描述...

    《DIV+CSS入门教程》

    4. 掌握浮动和定位,实现元素的相对、绝对和固定定位,解决布局问题。 5. 学习响应式设计,利用媒体查询适应不同设备和屏幕尺寸。 6. 使用Flexbox和Grid布局系统,创建更复杂的动态和响应式布局。 7. 实践CSS预...

    纯css实现圆角矩形

    其中,利用纯CSS实现圆角矩形是前端开发者经常遇到的需求之一,尤其在设计按钮、卡片、菜单等元素时。下面,我们将深入探讨如何通过CSS来创建一个具有圆角的矩形,并分析给出的示例代码。 ### 纯CSS实现圆角矩形的...

    纯div+css实现的仿QQ音乐返回顶部和返回底部特效源码.zip

    这个"纯div+css实现的仿QQ音乐返回顶部和返回底部特效源码.zip"压缩包文件提供了一个实例,展示了如何利用CSS3和HTML元素来实现类似QQ音乐应用中的“返回顶部”和“返回底部”的功能。这一功能对于长页面滚动时用户...

    纯CSS实现的lightbox风格的高亮弹出框效果.zip

    本项目名为"纯CSS实现的lightbox风格的高亮弹出框效果.zip",它强调了仅使用CSS(层叠样式表)来创建这种功能,没有依赖JavaScript(尽管标签中提及了"js",但描述中提到的是纯CSS实现)。 首先,我们需要了解CSS的...

    div css实现固定在网站底部的在线客服代码.rar

    纯div css实现固定在网站底部的在线客服代码实现起来真的很简单 关键代码是 style.css内的 position:fixed; 固定位置 left:0px; 你可以换成right 或者top 位置是不是又变化了呢 bottom:0px; 可以换成top 或者...

    29款纯DIV+CSS网站导航菜单源码分享

    今天我们要讨论的是29款基于纯`DIV`和`CSS`的网站导航菜单源码,这些源码可以帮助开发者快速创建出美观且功能齐全的导航栏。 1. **响应式设计**:在现代网页设计中,响应式设计是必不可少的,这些源码通常会包含对...

    很简单的纯CSS固定漂浮层

    本案例中,我们探讨的是一个“很简单的纯CSS固定漂浮层”的实现方法,无需JavaScript或其他编程语言,仅通过CSS就能达到预期效果。 首先,我们要理解CSS中的定位属性,这是实现固定漂浮层的关键。CSS中的定位主要有...

    CSS3实现圆形进度条

    **CSS3实现圆形进度条详解** 在Web开发中,进度条是一种常见的用户界面元素,用于显示任务或过程的完成程度。传统的进度条多为水平或垂直条状,但随着CSS3特性的不断发展,设计师们开始探索更具有创意的展现方式,...

    纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)

    纯CSS实现右侧底部悬浮效果是一种不需要JavaScript即可完成的网页设计技巧,它主要用于将网站的联系信息、社交媒体图标或者客服咨询等按钮固定在浏览器窗口的右侧底部位置。这类悬浮效果可以使用户的交互更加便捷,...

Global site tag (gtag.js) - Google Analytics