随着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. 第21篇 ubuntu安装ftp服务器（转载）

    ubuntu安装ftp服务器 1: 安装vsftpd ~$ sudo apt-get install vsftpd ubuntu10.10自己装了,这步省略. 2: 配置vsftpd 2.1 修改vs ...

  2. ubuntu14.04安装pyspider

    sudo apt-get install libcurl4-openssl-dev libxml2-dev libxslt1-dev sudo atp-get install phantomjs 激活 ...

  3. mysql编译参数详解

    mysql编译参数详解(./configure)   1.--prefix=PREFIX:指定程序安装路径: 2.--enable-assembler:使用汇编模式:(文档说明:compiling i ...

  4. 【Http认证方式】——Basic认证

    访问请求:http://192.168.2.113:8080/geoserver/rest/workspaces时,浏览器弹出窗口需要输入用户名和密码  ,并且,如果不输入或者输入错误,浏览器返回  ...

  5. 用 Python 实现文件查找

    用 Python 实现文件查找(BIF实现及队列实现) (1)利用内置函数实现文件查找 1.功能:返回用户输入的文件的绝对路径 2.设计思路: (1)用户输入在哪个盘进行查找 (2)遍历此盘文件,若为 ...

  6. php单链表实现

    php单链表实现 <?php //单链表 class Hero{ public $no; public $name; public $nickname; public $next=null; f ...

  7. HTTP 无法注册 URL http://+:8000/。进程不具有此命名空间的访问权限

    转到bin/debug/目录下, 右键管理员启动

  8. 什么是DA控制

    液压系统中的DA控制: Automotive Drive control & Anti stall control 自动变速控制 & 防熄火控制 (DA控制) 1:自动(变速)驱动控制 ...

  9. flask系列四之SQLAlchemy（二）表关系

    一.SQLAlchemy外键约束 1.创建外键约束表结构 目标:建立两个表“用户表(user)”和“问题表( question)”,其中问题表中的作者id是是用户表的id即外键的关系.(一个用户可以有 ...

  10. blockground

    颜色的表示方法 一共有三种:单词.rgb表示法.十六进制表示法 rgb:红色 绿色 蓝色 三原色光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的.用逗号隔开,r.g.b的 ...