关于 position:fixed; 属性

发布时间(jian)：2015-06-08 17:59:25点击：2471字号：T|T

关于 position:fixed; 属性

生成绝对定(ding)位(wei)的(de)元素(su)(su)，相对于浏览(lan)器窗口(kou)进行(xing)定(ding)位(wei)。元素(su)(su)的(de)位(wei)置通过 “left”, “top”, “right” 以及 “bottom” 属性进行(xing)规(gui)定(ding)。

position:fixed; 可以让(rang)网(wang)页(ye)上的某个(ge)元素固定在一(yi)个(ge)绝对的位(wei)置(zhi)，即使拉动滚动条位(wei)置(zhi)也不发生(sheng)变化。

一(yi)般的(de) position:fixed; 实现方法

这个 HTML 元素使用(yong)的 CSS 代码如下：




#top{  

   position:fixed;   

  bottom:0;    

 right:20px; }




实现让

...
元(yuan)素固定(ding)在浏览(lan)器的(de)底部和距(ju)离(li)右边的(de)20个(ge)像素。

在 IE6 中实现 position:fixed; 的办法

刚刚提过，在 IE6 中是不能直接使用 position:fixed; 。你需要一些 CSS Hack 来(lai)解决它。（当然(ran)，IE6 的(de)问题也不仅仅 position:fixed;）

相同的还是让

...
元素固定在(zai)浏览器的底部和距离右边(bian)的20个像素，这次(ci)的代码是：




#top{ position:fixed;   

_position:absolute;    

bottom:0;     

right:20px;    

_bottom:auto;  

_top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }




right 跟 left 属性可以用(yong)(yong)绝对(dui)定位的办(ban)法解(jie)决，而(er) top 跟 bottom 就需(xu)要用(yong)(yong)上面(mian)的表达(da)式来实(shi)现(xian)。其(qi)中在_position:absolute;中的_符号只有 IE6 才能识(shi)别，目的是为了区分其(qi)他浏览器。

上面(mian)的只是(shi)一(yi)个例子，下面(mian)的才(cai)是(shi)最(zui)重要的代码(ma)片段(duan)：

使元素固定在浏览器(qi)的顶部(bu)




#top {  

    _position:absolute;  

    _bottom:auto;    

  _top:expression_r(eval_r(document.documentElement.scrollTop)); }




使元素固定在浏览器的底部




#top {     

 _position:absolute;   

   _bottom:auto;    

  _top:expression_r(eval_r(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }




这两段(duan)代码(ma)只能实(shi)现在最底部跟最顶部，你可以使用(yong) _margin-top:10px; 或者 _margin-bottom:10px;修改其(qi)中的(de)数(shu)值控制元素的(de)位(wei)置(zhi)。

position:fixed; 闪(shan)动问题(ti)

现在(zai)(zai)，问(wen)题还没有完全解决。在(zai)(zai)用(yong)了上面的(de)办法后，你会发(fa)现：被固定(ding)定(ding)位的(de)元素在(zai)(zai)滚动(dong)滚动(dong)条的(de)时候会闪(shan)(shan)动(dong)。解决闪(shan)(shan)动(dong)问(wen)题的(de)办法是在(zai)(zai) CSS 文件中加(jia)入：




*html{   

  background-image:url(about:blank);    

 background-attachment:fixed; 

}




其中 * 是给 IE6 识(shi)别的。

到此，IE6 的 position:fixed; 问(wen)题(ti)已(yi)经被解决了。