域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您现在的位置： 创新互联 >> 网站建设 >> 网站建设常见问题 >> CSS中positionfixed固定定位用法分析

网页设计CSS中positionfixed固定定位用法分析

• 作者：谭小姐 文章来源：网站制作设计部 点击数：1612 更新时间：2009-9-14
• Position的英文原意是指位置、职位、状态。也有安置的意思。成都网站制作在使用CSS布局网页时，Position起到的作用非常重要。Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。本次我们就来了解一下fixed的用法。
  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语句，虽然能实现了类似的效果，但滚动条移动时，那个层晃来晃去的，感觉不好看，想要一种能使层固定不动的做法。
  且看下面的代码：
  <style type="text/CSS">
  <!--
  #help{
  width:30px;
  height:20px;
  background-color:green;
  position:fixed;
  left:60px;
  top:100px;
  }
  -->
  </style>
  成都网站制作用上面这段代码来定义页面上的一个层“help”（id=“help”）。这样就能实现我们想要的效果了。在IE8、Firefox、Opera、Google等浏览器中测试，都没有问题，唯独低版本的IE中，这个属性无效。
• 上一篇文章：css中的table-layoutfixed
  下一篇文章：网站制作：CSS备忘录Marging用法和标签的使用