布局中的固定定位

Await — Fri, 13 Nov 2009 03:29:36 +0000

有时候会有某个特殊的需求。如想让某个元素，某块内容固定在页面的某个位置不动，也就是不随滚动条的滚动而滚动。它相对于其他的元素始终是固定的。最近在项目中就有这么一个需求；我们先来熟悉下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*/
}

完整的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局中的固定定位</title> <style type="text/css"> /*<![CDATA[*/ 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*/ } p { margin: 50px 0; } /*]]>*/ </style> </head> <body> <div id="fixedid"> <a href="http://leotheme.cn" title="随你怎么拖，我就是不动">随你怎么拖，我就是不动</a> </div> 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 我是用来撑高页面的 </body> </html>

提示：你可以先修改部分代码再运行。

至此，一个固定布局完成了。但别急着高兴，这个看似简单又完美的东西好是不是真的那么完美呢？答案是：NO；在实际使用中发现了一个问题，如果之前有一天写好了的页面。要你把这个页面的“footer”改成固定布局，当你高兴的把这个任务完成后。高兴的一点刷新的时候。问题来了；如果之前这个页面里有相对定位和绝对定位的布局，你会发现，IE6之前的布局乱了。这个固定定位影响了之前的布局；怎么办？重写之前的布局？一个页面还好说。多了呢？那将会相当麻烦。那有没有更好的办法呢？答案是：YES；有问题就会有解决的办法，不是吗？通过搜索，找到了一个基于JQ的插件。下面来看下这个插件：

jquery插件：任意位置浮动固定层

/*调用：

1 无参数调用：默认浮动在右下角

$(”#id”).floatdiv();

2 内置固定位置浮动

//左下角
$(”#id”).floatdiv(”leftbottom”);

//右下角
$(”#id”).floatdiv(”rightbottom”);

//左上角
$(”#id”).floatdiv(”lefttop”);

//右上角
$(”#id”).floatdiv(”righttop”);

//居中
$(”#id”).floatdiv(”middle”);

另外新添加了四个新的固定位置方法

middletop（居中置顶）、middlebottom（居中置低）、leftmiddle（靠左居中）、rightmiddle（靠右居中）

3 自定义位置浮动

$(”#id”).floatdiv({left:”10px”,top:”10px”});

以上参数，设置浮动层在left 10个像素,top 10个像素的位置

可以看出这个插件相当强大。至少对于固定某个元素来说是非常强大。内置了常见的位置。支持自定义位置；而且解决了上面的那个问题。更详细的说明和下载请点击这里

随机日志

2008-11-29 -- 简单几步显示/隐藏文章内容 (16)
最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们...
2009-07-01 -- 一个很有意思的故事 (8)
有一个美国商人坐在墨西哥海边一个小渔村的码头上，看着一个墨西哥渔夫划着一艘小船靠岸。小船上有好几尾大黄鳍鲔鱼，这个美国商人对墨西哥渔夫能抓这么高档的鱼恭维了一番，还问要多少时间才能抓这么多？墨西哥渔夫...
2009-04-01 -- 4.1—愚人节 (6)
本来没啥好写的，在这样一个特别的日子里。今天早一大早，6点半的时候，一个在广西的兄弟打来电话，说过两天来我这看偶，当时那个激动啊...，后来他说今天是愚人节的时候才反应过来...有点失望。我们几个...
2008-08-14 -- 关于Maxthon这个主题的扩展计划[暂定] (2)
Maxthon这个主题从发布到现在也有些日子了，得到很多网友的关注。其中也发现了很多问题，在这对这个主题以后的扩展作下说明。首先我会再发布一个最基本的版本，不需复杂的操作，不需要插件。保证一装...
2008-09-09 -- IE下中英文字体不能对齐原因及解决 (0)
如果不是因为总监审查严格，一定要求这个细节解决掉，也许我也不会去深究根源性的解决办法，再此感谢MTIME负责而严格的同事。首先描述一下问题：如果所示，在IE下当一行文字同时有英文跟中...

您可能也喜欢：
WordPress主题之Maxthon 2.0.2[08-08-11]	Maxthon v1.0[最新修改]	谷歌Adsense将推本地电子支付	浅议Web网页Form表单设计技巧	关于Tab(选项卡)的一些实现方式
无觅

等待-放飞梦想 » 绝对定位

布局中的固定定位

随机日志