有时候会有某个特殊的需求。如想让某个元素，某块内容固定在页面的某个位置不动，也就是不随滚动条的滚动而滚动。它相对于其他的元素始终是固定的。最近在项目中就有这么一个需求；我们先来熟悉下CSS中关于定位的一些属性:
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
参数：
static : 无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级。
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。
fixed : 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。IE5.5及NS6尚不支持此属性。
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
我们知道，要让某个元素固定不动，可以设置这个元素的position属性为fixed；这个属性很好用很强大。但可惜的是万恶的IE6确不支持这个属性。这时候我们得请出传说中的Hack来了：
- body {
- margin: 0;
- padding: 0;
- height: 100%;
- overflow :auto;
- }
- #fixedid {
- position: fixed;
- _position: absolute; /* Hack for IE6*/
- right: 0;
- _right: 16px; /* Hack for IE6*/
- top: 300px;
- width: 200px;
- padding: 10px;
- text-align: center;
- font-weight: bold;
- background: #0F0;
- }
- html {
- _overflow: hidden;/* Hack for IE6*/
- }
完整的示例：
提示：你可以先修改部分代码再运行。
至此，一个固定布局完成了。但别急着高兴，这个看似简单又完美的东西好是不是真的那么完美呢？答案是：NO；在实际使用中发现了一个问题，如果之前有一天写好了的页面。要你把这个页面的“footer”改成固定布局，当你高兴的把这个任务完成后。高兴的一点刷新的时候。问题来了；如果之前这个页面里有相对定位和绝对定位的布局，你会发现，IE6之前的布局乱了。这个固定定位影响了之前的布局；怎么办？重写之前的布局？一个页面还好说。多了呢？那将会相当麻烦。那有没有更好的办法呢？答案是：YES；有问题就会有解决的办法，不是吗？通过搜索，找到了一个基于JQ的插件。下面来看下这个插件：
jquery插件：任意位置浮动固定层
/*调用：
1 无参数调用：默认浮动在右下角
2 内置固定位置浮动
$(”#id”).floatdiv(”leftbottom”);
//右下角
$(”#id”).floatdiv(”rightbottom”);
//左上角
$(”#id”).floatdiv(”lefttop”);
//右上角
$(”#id”).floatdiv(”righttop”);
//居中
$(”#id”).floatdiv(”middle”);
另外新添加了四个新的固定位置方法
middletop（居中置顶）、middlebottom（居中置低）、leftmiddle（靠左居中）、rightmiddle（靠右居中）
3 自定义位置浮动
以上参数，设置浮动层在left 10个像素,top 10个像素的位置
可以看出这个插件相当强大。至少对于固定某个元素来说是非常强大。内置了常见的位置。支持自定义位置；而且解决了上面的那个问题。更详细的说明和下载请点击这里
我打算放弃对IE6的支持了，反正都是个人小站，大部分去我那的也都是非IE6用户。IE已经成为阻碍标准发展的绊脚石了。
不错的代码
你现在的主题真好