position:fixed

昨晚逛淘宝时候看到个店铺有个快捷方式导航一直固定在页面的边缘而不是浏览器的边缘，因为随着浏览器的大小不一样。

如果用position:absolute绝对定位那样就没法在滚动条移动的时候固定在浏览器某个坐标上了。

css固定定位

琢磨半天没想到好的方法，在了解到position:fixed定位符合我的要求后，加入top，left的属性值，测试了百分比和像素的都无法达 到理想要求，因为得考虑到不同分辨率显示器的用户。瞎搞腾一直无法让导航条菜单定位到网页的边缘。之后想了下百分比可以判断浏览器宽度自适应，那可以先定 义到最中间后再使用margin属性不就可以精确定位了么！哎，怎么人老了思路都不活跃了。搞腾了这么多时间，不过总算是给解决了。(╯﹏╰)b

 

例如盒子工作室的相册模板页的菜单定义。

.image-nav{position:fixed; top:108px;right:50%; margin-right:480px; background:#CB5D46; }

原理：position:fixed;固定定位，right:50%让属性绝对居中，margin-right:480px这个值就可以用来精确调节坐标了，以上示例大家可以自己修改数值。

 

解决了定位问题，大家记得还得考虑浏览器兼容性。ie6这个蛋疼的浏览器又在那搞腾了，ie6不能解析position:fixed; 属性。

所以我们需要解决兼容性问题让ie6也能达到同样效果。在你的css文件中增加以下定义。

兼容这个是网上搜来的，原理是让ie6模拟固定定位的效果。切忌一点以下语句兼容后，如果页面内有其它的定位样式那可能会造成错位等现象。当然最好页面能用浮动的就用浮动。
* html {overflow-y:hidden;}
* html body {height:100%;overflow-y:auto;}
* html #floatMenu{position:absolute;}