简介
许多人都会面对的一个CSS定位问题。
不支持的
这个问题是不支持并且不再被支持（意思是我不帮你使它在你的页面当中正常工作）。这个缺陷只有等待Internet Explorer浏览器继承fixed 配置了。现在IE7的偶然来了，尽管在IE6中也可以使用固定功能，那是在将来的WEB当中非常有价值的。对于开发者来说IE6是存在严重问题的（IE 7也是有问题的, 但是现在忽略这个，6.0至少支持fixed定位）。它被停止，是更好的。
代替这个，应该鼓励IE6的用户更新到IE7。然而用户不能更新到IE7（因为IE7不是针对所有的浏览器发行的），应该使用更好的浏览器，例如Opera 或者Firefox,他们是不受微软的控制的。
什么是“position: fixed;”?
position: fixed; 与 position: absolute; position: relative; andposition: static;.相比是不寻常的。
除了当用户在滚动页面的时候，元素不会跟着滚动以外。“position: fixed;”基本上与“position: absolute;”一样的。严格的说这个元素还是在原来的地方。有许多的页面使用它是为了定位LOGO或者网页菜单。
“ position: fixed;”出了什么问题?
好吧，。。。也没什么。这个问题是这个最流行的浏览器 － Internet Explorer for Windows 不能解释它。用原来的定位“position: absolute;”没有什么，同样地，恢复position: static; CSS标准.有相同的效果却根本没有定位。注意IE 7 beta 2版以前的支持position:fixed; (如果你使用文档类型申明将引发STRICT MODE)所以我将从这个问题上排除IE7。
因此，一些人使用setInterval 脚本每几毫秒去重新定位一个绝对定位的元素，或者（忽略Netscape 4）当捕获到onscroll 事件时候这样做。这将产生很傻的抖动效果。如果接受position: fixed;样式的浏览器接受将会是更好的，浏览器也不需要用position: absolute; 和 JavaScript.。一些作者在没有滚动的效果情况下，使用＞CSS选择符来隔离IE使元素在浏览器中不采用绝对定位。
div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }
它将产生一个相当漂亮的效果，并且与一个检测当前样式是绝对定位的JAVASCRIPT结合时将会更好，当获到onScroll事件时再重新定位。
可以改善这种情况吗？
可以。如果它仅用CSS可以实现的话那将会更简洁，我找到了一个离那个要求更近的方法。
在IE5的时候，㠞软就加入了它们的属性Expression到CSS当中，我急于选择这些去进行元素的绝对定位。在浏览器中，Expressions应该是一个根据变化自动更新的，如在滚动页面或者改变窗口的时候。
div#fixme {
left: expression( document.body.scrollLeft + 'px' );
top: expression( document.body.scrollTop + 'px' );
}
body > div#fixme { position: fixed; left: 0px; top: 0px; }
但还是太令人失望的。由于在IE表达式的说明中提到了一个BUG，它将不再更新这个，因此只能停留在（0，0）的坐标。
不管怎么样，用一些CSS就可以玩弄的，我产生了一些奇怪的念头。如果我分配这个值到变量当中的话，那我就将它指定到Expression的同一行中。在IE5.5和6.0中它已经更新了。虽然有轻微的抖动，但与用脚本来控制定位的技术相比也不算坏。
top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );
当然，在IE6，按照顺从方式把document.documentElement.scrollTop赋给变量，所以我也需要去检查。IE7在这个问题上也是被排除的。
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
我们想定位某个元素绝不是（0，0）坐标。
top: expression( ( 10 + ( ignoreMe = document.body.scrollTop ) ) + 'px' );
当然，不能验证CSS，因此我宁愿在一个条件注释里放一段特别的CSS，这也允许像NETSCAPE4这样较少的浏览器使用正常的left和top定位一样。
<style type="text/css">
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; left: 20px; top: 10px;
}
body > div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
我的一个读者发现了一个停止跳动的效果的方式。（更多的情况请点此处），但记着它不是一直都正常 － 如果这个问题被接纳的话这个例子在这个页面上一直是跳动的（另外一个读者发现一个怎样在页面中像这样定位），不管怎么样，你将发现它是可以为你派上用场的。
另外的问题如何解决?
好，也许你想把它放在右下角。理论上，你只需要将左替换为右，上替换为下。你只要将表达式的开头部分的＋号改为－号即可。如果那样简单就好了。但并不是那样简单。IE获到的是完全错误的位置，直到你滚动页面，然后重新配置两倍的距离，如果你除以2将每次1个像素，呸！
因此，它总是需要通过左上来进行定位，无论喜欢与否。但是我们能重新定位它检查它自己的尺寸和窗口的尺寸。移动它到其它的角落。我们可以通过在“标准遵从规范”里的documentElement对象规范的clientHeight的属性解决它自己的大小（多么垃圾！如果IE一开始就遵从规范那样我就就不必要去经历这么多愚蠢的事－离题了），还有在Quirks mode 中的Body对象（详细信息看这个我的Javascript 文档window size部分）。我们可以得到元素本身的大小通过使用fixme.offsetHeight。这是为了更正常的表现的IE的简短方法。
document.getElementById('fixme').offsetHeight
太感谢了，这个窗口与元素的大小不必任何的戏法去强制它们去更新。但我们一直需要去检查这个standards/quirks模式。
这个默认安装是使用右下属性的，所以浏览器正好正确的支持。在IE5.5＋，这些要重新设置，并且左上的位置替换。记住右下的效法像这样，在表达式中这个补偿必须是负的。
<style type="text/css">
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* 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 ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
为什么不在Netscape 4的浏览器中用 JavaScript 去解决它呢?
如果你想去做，仅仅只需要像这样:
if( document.layers ) { setInterval ( 'document.layers.divID.top=window.pageYOffset;', 100 ); }
你甚至可以在IE4 和 5.0/Win用 document.all. 但老实说, 在Netscape 4浏览器中，我正面临使CSS可以工作的非常讨厌的问㼵，我知道有许多的问题可以通过它可以解决，但是面临事实吧；NETSCAPE4 不通应对今天的CSS。它虽然很好但它的历史一去不复返了。让它安息吧。
山西省实业家联合会网http://www.sxssyjw.com/
