`
jordan_micle
  • 浏览: 240843 次
  • 性别: 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实现不固定大小div相对于body垂直居中效果

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

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

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

    纯CSS3实现给头像加个光芒四射且旋转的背景动画效果

    复制代码代码如下:&lt;div id=”raysDemoHolder”&gt; &lt;a&gt;WebHek&lt;/a&gt; &lt;div ...我们这里要用纯CSS来实现,需要使用CSS3的动画技术,这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes,从rotate(0deg)旋转到ro

    纯CSS表头固定的实现代码

    纯CSS实现表头固定之所以难,主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个,是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks...

    div css视差滚动页面模板下载.rar

    纯css实现页面视差滚动单页面网站设计,鼠标移动,图片固定不动,形成视差

    jquery.valign插件实现图片,文字上下左右垂直居中

    此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...

    js固定在网站底部在线客服代码

    非常简单的纯div+css+js实现固定在网站底部在线客服代码,不随页面滚动一直固定在网页底部的QQ客服代码。

    使用JQUERY进行后台页面布局控制DIV实现左右式

    可编辑部分是随浏览器变化而变化的,因此有的时候使用frame框架来实现这种形式,这边作者不是使用的frame而是纯div进行布局,想要实现这种方式需要怎么做呢,下面就控制DIV实现左右式,左边固定,右边随浏览器变化而...

    CSS高级技巧:圆角矩形

    在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码. html代码如下: &lt;div class=wrapper&gt; 标题&lt;/h1&gt; 内容&lt;/p&gt;&lt;/div&gt; 图片大致如下: top.gif bottom.gif

    css3实现顶部社会化分享按钮示例

    今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自google和bootstrap的字体文件,包含了个大社交...

    div中文字内容溢出常见的解决方法

    2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; ——缺点是火狐浏览器实现效果不好,...

    html+css3太阳系行星运转动画效果的实现代码

    做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转...容器用relative和内部元素采用absolute的定位方式,比较简单的能实现效果,缺点就是大小是固定的。 XML/HTML Code复制内容到剪贴板 &lt;di

    简单好用的原生js百分比进度条效果

    一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式...

    CMS 网站管理系统 源码

    2、 网站模板与程序分离,支持多种标签调用,支持DIV+CSS,通过模板设计便可实现个性化网站 CMS实现了“网站模板与程序完全分离”的新概念, JS标签跨站调用,支持不同频道、栏目、专题、内容页应用不同的模 模板...

    Art2008 CMS 网站管理系统 v3.1.rar

    2、 网站模板与程序分离,支持多种标签调用,支持DIV CSS,通过模板设计便可实现个性化网站 Art2008 CMS实现了“网站模板与程序完全分离”的新概念, JS标签跨站调用,支持不同频道、栏目、专题、内容页应用不同的...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式...

Global site tag (gtag.js) - Google Analytics