当前位置:

首页 > 前端交互

布局中的固定定位

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

  1. body { 
  2.     margin: 0;
  3.     padding: 0
  4.     height: 100%;
  5.     overflow :auto;
  6. }
  7. #fixedid { 
  8.     position: fixed;
  9.     _position: absolute; /* Hack for IE6*/
  10.     right: 0;
  11.     _right: 16px; /* Hack for IE6*/
  12.     top: 300px;
  13.     width: 200px;
  14.     padding: 10px;
  15.     text-align: center;
  16.     font-weight: bold;
  17.     background: #0F0;
  18. }
  19. html { 
  20.     _overflow: hidden;/* Hack for IE6*/
  21. }

完整的示例:

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

至此,一个固定布局完成了。但别急着高兴,这个看似简单又完美的东西好是不是真的那么完美呢?答案是: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-03-20 -- Windows Internet Explorer 8 简体中文正式版 (2)
    IE8 的一些有趣的新功能: Accelerators(加速器):节省浏览网页或搜索信息的时间,比如在网页中看到一个地址,选中然后右击,就可以从弹出对话框中选择 Google Map 或...
  • 2008-08-26 -- 说真的,这篇文章很有”意思”?! (5)
    1、我在沙发上看电视,老婆裹着浴巾坐到我腿上,风情万种地说:“大爷,你就要了小女子吧?”我故意坐怀不乱:“不要不要,大爷我今天身上没钱!”老婆:“什么钱不钱的,只要让小女子爽了就行,事后补个欠条吧!”...
  • 2009-06-16 -- RegSvr32 MsXmL3.DLL如此神奇 (2)
    这个困扰我好久的问题终于解决了,这问题很奇怪。就是在登录论坛的时候。当输入了用户名和密码点击那个登录的按钮时。问题来了,它会直接把这个login.php下载了。这问题第一次遇到是不久前了,但当时一直没...
  • 2009-09-05 -- 新工作,新起点。 (12)
    时间过得真快,转眼来北京已经一个月了。可记忆中好像就是昨天才蹋上这片陌生的土地;一直以来,从没想过有天会离开那个熟悉的城市,到另一个完全陌生的城市。当蹋上开往北京的列车的那一刻,心里有很多很多种滋味。...
  • 2009-06-08 -- 浅议Web网页Form表单设计技巧 (2)
    “输入框(Input)应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”——《HTML权威指南》 Web应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致...

发表评论2 位网友发表了评论  

  1. vichair 说:

    我打算放弃对IE6的支持了,反正都是个人小站,大部分去我那的也都是非IE6用户。IE已经成为阻碍标准发展的绊脚石了。

  2. 要饭的 说:

    不错的代码
    你现在的主题真好

添加新的评论浏览评论»  

表情
icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 



注意:
1、本站启用了审核机制,你的留言可能稍后才会显示,请不要重复提交,谢谢。
2、留言时的头像是Gravatar提供的服务。想设置的看这里
3、评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。