CSS中position:fixed固定定位用法指导
创始人
2024-07-14 02:11:17
0

CSS中position属性有4种可选值:static,relative,absolute,fixed,用于定位html元素的位置,并影响元素块生成的方式。这里向大家描述一下position:fixed 的使用,此属性元素的定位方式同absolute类似,但它的包含块是视区本身。

使用CSS的position:fixed

Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成。

  Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。

position:fixed 相对于窗口的固定定位

  这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它答应框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于***页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。

注意:IE6不支持CSS中的position:fixed属性。

我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed。我平时比较常用absolute和relative,而position:fixed却没多关注。或许是因为当初在CSS中文手册中看到position:fixed旁边有说明“IE5.5及NS6尚不支持此属性”吧。

前段时间,在做一个项目时需要使一个层相对于浏览器边框固定,那时用position:absolute试了下,发觉absolute是对网页边框而言的。后来,上网查了一些根据滚动条的移动,动态地改变left和top的值的JavaScript语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。

且看下面的代码:

  1.  
  2.  
  3.  

 我们用上面这段代码来定义页面上的一个层“help”(id=“help”)。这样就能实现我们想要的效果了。在IE8、Firefox、Opera、Google等浏览器中测试,都没有问题,唯独低版本的IE中,这个属性无效。

【编辑推荐】

  1. 解决IE6 position:fixed 固定定位问题
  2. CSS中三大position属性值用法解读
  3. 深入探究DIV CSS布局中position属性用法
  4. CSS属性display:inline-block使用揭秘
  5. Firefox、IE7、IE6浏览器兼容问题概念解析

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...