随着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. Mybatis自动生成实体类、dao接口和mapping映射文件

    由于Mybatis是一种半自动的ORM框架,它的工作主要是配置mapping映射文件,为了减少手动书写映射文件,可以利用mybatis生成器,自动生成实体类.dao接口以及它的映射文件,然后直接拷贝到 ...

  2. Java知识点汇总

    Java中泛型的本质 Java中静态变量的适用场景 Java类加载原理及类加载器 Java中对Clone的理解 Java中HashMap的实现 Java中Collection和Collections的 ...

  3. etcd服务端和客户端安装

    下载地址: 服务端:http://download.csdn.net/download/wuxun1997/9841277 客户端:http://download.csdn.net/download/ ...

  4. Linux修复磁盘操作

    Linux修复磁盘操作 1.卸载分区 umount /data 修复磁盘,先判读是磁盘坏了,还是文件系统坏了:一般可以修复,但是建议换磁盘. 2.fsck  -y /dev/sda1  ##-y 参数 ...

  5. python开发线程:死锁和递归锁&信号量&定时器&线程queue&事件evevt

    一 死锁现象与递归锁 进程也有死锁与递归锁,在进程那里忘记说了,放到这里一切说了额 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将 ...

  6. python开发模块基础：os&sys

    一,os模块 os模块是与操作系统交互的一个接口 #!/usr/bin/env python #_*_coding:utf-8_*_ ''' os.walk() 显示目录下所有文件和子目录以元祖的形式 ...

  7. python学习（十四） 网络编程

    14.1 少数几个网络设计模块 14.1.1 socket模块 套接字包括:服务器套接字和客户机套接字. 在创建一个服务器套架字后,让它等待连接,这样它就在摸个网络地址处(IP地址和一个端口号的组合) ...

  8. PHP函数(三)-递归函数

    递归函数就是函数本身在内部调用自己 <?php function DiGui($n){ echo $n."  "; if($n>0) DiGui($n-1); else ...

  9. python's twenty-sixth day for me 模块

    configparser 模块: 该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键 = 值). 创建文件: # 创建文件 i ...

  10. 【基础巩固】文件流读写、大文件移动 FileStream StreamWriter File Path Directory/ ,m资料管理器（递归）

    C#获取文件名 扩展名 string fullPath = @"d:\test\default.avi"; string filename = Path.GetFileName(f ...