CSS:position:fixed使用(转)
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
我们平时所说的固定定位指的就是fixed,设置了固定定位的元素不会随滚动条上下滚动。
二、一般的 position:fixed; 实现方法
<div id="top">...</div>
元素固定在浏览器的底部和距离右边的20个像素,这次的代码是:#top{
position:fixed;
bottom:0;
right:20px;
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_position:absolute;
中的 _
符号只有 IE6 才能识别,目的是为了区分其他浏览器1、使元素固定在浏览器窗口的顶部:
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop));
}
2、使元素固定距浏览器窗口的顶部a像素的位置:
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop));
_margin-top:a;
}
或者
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop+a));
}
3、使元素固定在浏览器窗口的底部:
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
4、使元素固定在距浏览器窗口的底部b像素的位置:
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
_margin-bottom:b;
}或者
#top{
_position:absolute;
_top:expression
(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||b)-(parseInt(this.currentStyle.marginBottom,10)||b)));
}
四、IE6下的闪动问题
问题还没有完全解决。在用了上面的办法后,你会发现:被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入:
*html{
background-image:url(about:blank);background-attachment:fixed;}
其中 *
html选择器hack是给 IE6 识别的。
到此,IE6 的 position:fixed; 问题已经被解决了
原文:http://blog.sina.com.cn/s/blog_51048da701018jzw.html
CSS:position:fixed使用(转)的更多相关文章
- 小技巧css解决移动端ios不兼容position:fixed属性,无需插件
移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...
- 浮动层固定兼容IE6 position:fixed的最佳解决方案
第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...
- iphone下元素放在了一个position: fixed的div中无法点击
网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...
- css3 position fixed居中的问题
通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 假设还想让此元素位置固定呢?一般我们会加入position:fixed,例如以下: #element{ po ...
- 唤醒键盘时取消对特定类的position:fixed定位
/* 唤起键盘时取消对特定类的position:fixed定位 */ var windheight = $(window).height(); /*未唤起键盘时当前窗口高度*/ $(window).r ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- CSS中position:fixed的用法
我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...
- css 兼容 position:fixed
我是头 我是主体 有多少内容,我就有多高 我是脚 我要随滚动条滚动 我要随滚动条滚动 我要随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
随机推荐
- Java基础知识笔记(五:多线程的同步问题)
编写多线程程序往往是为了提高资源的利用率,或者提高程序的运行效率,或者更好地监控程序的运行过程等.多线程同步处理的目的是为了让多个线程协调地并发工作.对多线程进行同步处理可以通过同步方法和同步语句块实 ...
- Golang接口(interface)三个特性(译文)
The Laws of Reflection 原文地址 第一次翻译文章,请各路人士多多指教! 类型和接口 因为映射建设在类型的基础之上,首先我们对类型进行全新的介绍. go是一个静态性语言,每个变量都 ...
- autofac 组件的实例范围
实例范围决定如何在请求之间共享服务. 原文地址:http://docs.autofac.org/en/latest/lifetime/instance-scope.html 每个依赖一个实例 使用这个 ...
- 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子
一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...
- O365(世纪互联)SharePoint 之使用列表库发布新闻
前言 上一篇文章,我们简单介绍了如何个性化O365的SharePoint站点,本文我们演示一下如何使用SharePoint自带的列表应用程序,定制一个公司新闻的栏目. 其间,用到的主要工具是Share ...
- 使用Kotlin对ViewGroup的视图进行函数使操作
原文标题:Functional operations over Views in ViewGroup using Kotlin 原文链接:http://antonioleiva.com/functio ...
- Undefined symbols for architecture arm64:
1. 没有往项目中导入静态库(.a 文件)需要的 framework. 2.拖到项目中的静态库不支持arm64(或其他)指令集 这种情况没遇到过 一般都是第一种情况.
- js实现发送验证码倒计时按钮
在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...
- ORACLE推导参数Derived Parameter介绍
Oracle的推导参数(Derived Parameters)其实是初始化参数的一种.推导参数值通常来自于其它参数的运算,依赖其它参数计算得出.官方文档关于推导参数(Derived Parameter ...
- SQL连接操作符介绍(循环嵌套, 哈希匹配和合并连接)
今天我将介绍在SQLServer 中的三种连接操作符类型,分别是:循环嵌套.哈希匹配和合并连接.主要对这三种连接的不同.复杂度用范例的形式一一介绍. 本文中使用了示例数据库AdventureWorks ...