随着web标准的规范化，网页的布局也随之千变万化。各种复杂漂亮有创意的页面布局冲
击这人们的视野，相比以前的table布局那就不是一等级的事儿。这个很大一部分功劳是css

样式的引入。而这个多样性布局的主要有归功于position与float这两个css属性。今天，我

不想讲这个属性布局页面；我主要说说position在现在网页运用中的一些用法。

关于position的用法或许很多前端童鞋都会讲position的用法我早就会啦，还需要你在这 
里著文解说。确实，对于position的用法大家都是经常用到，但是有些细节至少我还是挺模 
糊不清的，以至于在布局的时候出现兼容问题。

了解position的童鞋都知道这个属性有四个属性值

  1. static:这个是默认属性值，也就是该盒子按照标准流进行布局

  2. relative:称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然
    后使盒子相对于它在原来的标准位置偏移指定的距离。相对定位的盒子还在标准流中，它后

    面的盒子仍以标准方式对待它。

  3. absolute:绝对定位，盒子的位置以它的包含框为基础进行偏移。绝对定位的盒子从标准
    流中脱离。使其对其后的兄弟元素盒子的定位没有影响。

  4. fixed:固定定位，它和决定定位有些类似。只是它是以浏览器的窗口为基准进行定位，也就是当拖动浏览器的滚动条时，依然保持对象位置不变。

下面具体举例说明

1.static(静态定位)
如图1-1 static是默认属性值设置top，left值是不起效果的。

2.relative(相对定位)
如图1-2

2-1.relative布局实例
如图1-3，在很多页面布局中都有这样的tab选项卡，选项卡菜单下面一条水平底线，我看过

很多页面实现都是给菜单选项的父元素加个背景图来实现底线，这个方法好实现，但那是需

要多一张图片，如果底线颜色变啦还得重新切图，很不灵活。

在我的经验中，我利用position:relative，border-bottom就可以很灵活的实现图1-3的效

果
，而却不再需要麻烦的切图，更改下边线的颜色只需修改下边框的颜色即可，还减少一个

图片的http请求。

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    * {margin:0;padding:0;}

    pre {width:580px; margin:0 auto; padding:10px; word-wrap:break-word; word-break:break-all; white-space:normal;background:#eee; }

    .posWrap {width:600px; height:40px; margin:20px auto; border-bottom:2px solid blue; background:red;}

    .relative {float:left; position:relative; left:0; top:0; width:100px; height:40px; margin-right:10px; line-height:40px; text-align:center; background:yellow;}

    .relative.on {margin-bottom:-2px; padding-bottom:2px;}

    </style>

</head>

<body>

<div class="posWrap" id="div1">

    <span class="relative on">菜单一</span>

    <span class="relative">菜单二</span>

    <span class="relative">菜单三</span>

</div>

<pre>.relative {float:left; position:relative; left:0; top:0; width:100px; height:40px; margin-right:10px; line-height:40px; text-align:center; background:yellow;}<br/>.relative.on {margin-bottom:-2px; padding-bottom:2px;}</pre>

</body>

</html>

3.absolute(绝对定位)
绝对定位布局只需要注意两点

1.当以父元素外框为定位基点的需要精准定位到右对齐的时候，外框的宽度最好不能出现基数，否则在ie6下就出现1px的偏差，如图1-4。

正常

2.当以父元素外框为定位基点的需要几贴父元素底部定位时，在ie6/7下要触发haslayout(这次测试没有重现出来，等下次布局遇到在补充)

4.fixed（固定定位）
固定定位是以浏览器窗口为基准定位，在现代浏览器都支持，唯有ie6不支持

这次在项目的时候就有个js交互用到了position:fixed，运用这个的好处很多当浏览器滚动时，不需要用js去时时计算元素的top或bottom的的坐标值，而却元素还不是抖动的厉害影响用户体验。实例如下：

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://s2.hqbcdn.com/??lib/jquery/jquery-1.7.2.min.js"></script>

    <style type="text/css">

    * {margin:0;padding:0;}

    pre {clear:both; width:580px; margin:0 auto; padding:10px; word-wrap:break-word; word-break:break-all; white-space:normal;background:#eee; }

    .posWrap {width:600px; margin:20px auto; background:red;}

    .con {width:600px; height:200em; background:blue;}

    #posDiv {height:40px;}

    .absolute {position:absolute;width:100px; height:40px; background:yellow;}

    .posFixed {position:fixed;}

    </style>

</head>

<body>

<div class="posWrap" id="div1">

    <div class="con">content</div>

    <div id="posDiv"><div class="absolute">absolute</div></div>

</div>

<pre>.posWrap {position:relative; width:601px;}<br/>.absolute {position:absolute; right:0;}</pre>

<script type="text/javascript">

$(function(){

    var $posDiv = $('#posDiv');

    var $posDivMove = $('.absolute', $posDiv);

    var iMaxTop = $posDiv.offset().top;

    var iTop;

    $(window).bind('scroll resize', function(){

        var iHeight = $(window).height() - $posDivMove.height();

        iTop = $(window).scrollTop() + $(window).height() - $posDivMove.height();

        if (iTop <= iMaxTop) {

            if ($.browser.msie && ($.browser.version==6.0) && !$.support.style) {

                $posDivMove.css({'top': iTop + 'px'});

            }else{

                $posDivMove.addClass('posFixed').css({'top': iHeight + 'px'});

            }

        }else {

            $posDivMove.removeClass('posFixed').css({'top': 'auto'});

        }

    })

})

</script>

</body>

</html>

css属性position的运用的更多相关文章

  1. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  2. 详解 CSS 属性 - position

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: position: absolute position: relative position: fixed ...

  3. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  4. css属性—position的使用与页面的分层介绍

    一.引言: 在css众多属性中,position算是里面用的比较多也相对来说比较重要的属性了,它对于单个标签的“定位”.标签之间的“相对位置定位”还有网页的分层来说十分重要! 二.“定位的实现”具体介 ...

  5. CSS之position体验

    目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...

  6. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  7. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  8. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  9. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

随机推荐

  1. Linux下搭建 NFS

    一.NFS简介 NFS是Network File System的缩写,即网络文件系统.一种使用于分散式文件协定,有SUN公司开发.功能是通过网络让不同的机器.不同的操作系统能够分享个人数据,让应用程序 ...

  2. Linux 简单字符设备驱动

    1.hello_drv.c (1) 初始化和卸载函数的格式是固定的,函数名自定义 (2) printk是内核的打印函数,用法与printf一致 (3) MODULE_LICENSE:模块代码支持开源协 ...

  3. TStrings的一些技巧(转)

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的.常规的用法大家都知道,现在来讨论它的一些高级的用法.先把要讨论的几个属性列出来:1.CommaText2.Delimiter ...

  4. Internet上的网络层

    TCP/IP协议栈第三层是网络层,网络层的目的是实现两个系统之间的数据透明传送,具体功能包括寻址和路由选择.连接和建立.保持和终止等. TCP/IP协议给internet上的每台主机和路由分配一个地址 ...

  5. MinGW安装与环境变量配置和Sublime Text 2搭建C++编译环境

    MinGW安装与环境变量配置 从http://sourceforge.net/projects/mingw/下载MinGW,安装到D:\MinGW.工具集选择安装(之后还可以进行安装卸载):至少需要安 ...

  6. nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤（linux系统下）

    nginx 的第三方模块ngx_http_accesskey_module 来实现下载文件的防盗链步骤(linux系统下),安装Nginx和HttpAccessKeyModule模块(参考LNMP环境 ...

  7. appium控制Android按键

    按键的keycode,如下: KEYCODE_HOME Home键 3 KEYCODE_BACK 返回键 4 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYC ...

  8. Zabbix 客户端自定义端口监控

    http://www.linuxidc.com/Linux/2013-05/83780.htm 

  9. js实现可拖动的布局

    思路:采用flex布局,js即时修改固定列的宽度 注意:父元素需设置position:relative:因offsetLeft和offsetTop是相对于具有定位的(position:absolute ...

  10. springboot成神之——发送邮件

    本文介绍如何用spring发送邮件 目录结构 依赖 MailConfig TestController 测试 本文介绍如何用spring发送邮件 目录结构 依赖 <dependency> ...