用css固定位置的方法

支付宝内搜索 9155838 即可领现金红包 每天都能领哦

在某些时候需要将一个div固定在一个浏览器某个指定的位置：
例如在使用loading状态条的时候，或者显示在线用户数的时候。需要层显示在 网页的正中间，顶端或者左下端，并且在拉动滚动条的时候这个层依然保持在相同的相对位置。

些人用表格+js脚本的形式实现，代码数量比较庞大，并且可能只能在ie下面比较良好的实现，在其他例如firefox下效果就糟糕了，其实用css是很可以容易实现的，只需要用到 position:fixed这个描述参数即可。和position: fixed;同一级的属性还有 position: absolute; position: relative; position: static;

我说一下fixed和absolute的区别，fixed表示始终处于浏览器的同一个位置，即使你拉动滚动条，依然会显示在屏幕的相对位置，而absolute则不一样，absolute针对网页的位置进行描述，所以拉动滚动条后有可能会将显示在中部的div拉动到顶端去，因此，下面的一段css将会把div放在浏览器的中央：

  1. #Loadings{
  2. position:fixed ;
  3. top:100px;/*始终距离屏幕的高度是100px*/

/*后面的描述和位置无关，所以后面的例子请大家关注本行之前的描述*/
width:220px;height:20px;
left:50%;
margin:0 0 0 -110px;/* 将div将左端推进一半的长度，这样才能显示到真正的中间 */
border:1px solid red;
}
如果你用这段css去做实验的话，我相信很多朋友看不到应有的效果，原因在于你用的是IE，那个对w3标准支持不完善的浏览器，如果你用firefox的话，应该是没有任何问题的。不过我们得承认现 实，毕竟IE的浏览器占据了绝大部分市场，所以必须写出兼容IE的css才行。由于IE不支持fixed，因此，可以针对IE和FF写不同的css，例如：

  1. div#Loadings { position: absolute; left: 0px; top: 0px; }
  2. body > div#Loadings { position: fixed;/*这个描述IE不认识，因此针对其他浏览器有效*/ }

上面的代码解决了兼容的问题，但是IE下的依然不能将div固定在屏幕的具体位置，因此我们只有出绝招了，那便是写出兼容的css，代码如下（传说出现表达式的css出现了）：

  1. div#Loadings{
  2. left: 50%;
  3. top: expression( document.body.scrollTop +100 +'px' );/*按照表达式计算出当前屏幕位置所对应的网页位置*/
  4. }
  5. body > div#Loadings{ position: fixed; left: 0px; top: 100px; }

这样看来似乎已经很完美了，应该能够得到我们需要的效果了，不信，你自己试一试。对不起，让你失望了，这还是不行，因为我们在拉动滚动条的时候，针对IE 的那段css中的表达式罢工了，仅仅是载入页面的时候进行了计算，后面就不干活了，这可如何是好？别担心，一个IE的bug而已，我们只要将表达式的值赋 给一变量，这个问题就解决了，所以下面的css就可以正常工作了：

  1. #Loadings{
  2. position:fixed !important;/*important针对FireFox，这样后面的position描述就没有用了 */
  3. position:absolute;/* 针对IE */
  4. top:100px;
  5. top: expression( ( 100 + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  6. /*上面这个表达式针对IE，FireFox不认识该表达式，所以top的值就是100px了 */
  7. margin:0 0 0 -110px;
  8. width:220px;height:19px;
  9. left:50%;
  10. text-align:center;
  11. border:1px solid red;
  12. }

那么如何将div固定在左上角或者右下角呢？下面给点css代码，应该自己看看应该就能明白了：
div#Loadings {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( noValue2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + ‘px’ );
top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ );
}
----------------------------------

这是我这几个月以来的第一个技术方面的日志，我也不知道我现在是什么状态，慢慢的，慢慢的混吧，感谢所有关心我的人。

更新于:2008-06-12 23:12:21 栏目:网站周边/代码 关键词:css,网页,div,属性

本站使用「署名 4.0 国际」创作共享协议，可转载、引用，但需署名作者且注明文章出处

推荐文章

发表新评论