CSS中position:fixed固定定位用法指导

  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语句,虽然能实现了类似的效果,但滚动条移动时,那个层晃来晃去的,感觉不好看,想要一种能使层固定不动的做法。

  且看下面的代码:

  <styletype=”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中position:fixed固定定位用法指导

相关文章:

你感兴趣的文章:

标签云: