布局中的固定定位

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个像素的位置

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

随机日志

2009-06-13 -- 主题Dreamy更新到v2.0 [06-18 00:08] (61)
距离这个主题发布上一版已经差不多两个月了，而这个主题我一直在修修改改。虽然很多同学问我要我BLOG用的版本，但很多地方没有完善，所以一直没有发布自己用的版本。但现在好了，终于可以发布这个新的版本了。这...
2008-10-08 -- 一些三角形的CSS写法 (1)
多的就不说了,很简单的写法,大家直接运行看效果 www.leotheme.cn /*leotheme.cn*/ body{ margin:0 auto; text-ali...
2008-10-21 -- jQuery 对checkbox的操作 (5)
很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。看下面的一个小例子。在这个例子中包括了以下几个功能 1. 全选 2. 取消全选 3. 选中所有奇数 ...
2009-07-07 -- WordPress页面函数：wp_list_pages() (16)
模板标签wp_list_pages( )将WordPress页面作为链接显示出来。该模板标签常用于自定义侧边栏或标题，也常用于其他模板中。该模板标签在WordPress 1.5及更新版本中可用。用...
2008-09-11 -- jquery基础教程一[click,addClass,show,hide] (3)
原创内容—转载请说明出处. jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资...

您可能也喜欢：
Opera中国版“朱雀”正式发布	寻找Photoshop笔刷的15个好去处	给你的侧边栏添加一个登陆入口	CSS中关于背景图的应用技巧	酷狗推出手机版
无觅

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

布局中的固定定位

随机日志