纯CSS实现对象在网页任意位置不变(解决不同浏览器版本的兼容性问题)

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-11-01 15:50:18
  • 点击:9157
[0分]
纯CSS实现对象在网页任意位置不变

在前面“图层对象绝对居中”一文中提到,用纯CSS来实现对象绝对居中的原理。但在实际应用中,设计师们可能还会遇到将对象摆放到网页的某一指定位置的问题,尤其右(左)上角、右(左)下角,或者是两边的中间位置,甚至是页面的其他特定位置。其实一般情况下实现这种效果一点都不难,只要把CSS的position属性设为absolute,然后分别通过设定top和left的值即可。

但如果由于网页内容的高度问题而出现滚动条,当页面往下滚动时,原来设定的对象位置是否也跟随着一起滚动呢?事实上不同的浏览器对此事件有着不同的效果(大家不妨试试)。有经验的前端开发者可能第一时间会想到用JS或者JQuery来解决,这当然是可以解决问题——这里考虑到性能优化问题,所以个人推荐用纯CSS的方法)。

而今天主要是给大家分享一下用纯CSS的方法来实现这一功能效果。下面是实现对象位于网页右下角的CSS代码(其中ObjDIV为对象ID)

 
<style> 
#ObjDIV{ 
  border:1px solid blue; 
  background:#ccc; 
  width:200px; 
  height:150px; 
  position:fixed; 
  _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))); 
  bottom: 0; 
  right:0; 
} 
</style> 

同理,要实现对象位于页面右上角,只需将“bottom:0”改为“top:0”;其他位置也可进行类似的调整。有兴趣的朋友可以自己动手试试喔!!!

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华