随着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. mysql数据库备份与还原（转）

    MySQL备份和还原,都是利用mysqldump.mysql和source命令来完成的. 1.Linux下MySQL的备份与还原 1.1 备份 [root@localhost ~]# cd /var/ ...

  2. ADO+MFC数据库编程常用语句

    设在OnInitDialog()函数中,已经完成了初始化COM,创建ADO连接等操作,即 // 初始化COM,创建ADO连接等操作 if (!AfxOleInit()) { AfxMessageBox ...

  3. java代码练习======每隔5行打印数字

    总结:当我们感觉数字排列横排,竖排不好看的时候,学会空几行在排列,哎呦,效果不错喔 package com.aa; public class West2 { public static void ma ...

  4. oracle 12c使用问题总结

    1.无法登录 安装完毕只能使用system和sys用户,用安装时配置的密码登录:不能使用默认密码 2.远程无法访问 1)检测服务器配置 lsnrctl status 看到(DESCRIPTION=(A ...

  5. jmeter json截取

    前些日子压测我们系统,发现我们开发把cookie值当成一个参数返回到了json中,这样就要从json中获取这个cookie后配置到cookie 管理器中 Jmeter中本身是不支持直接处理json串的 ...

  6. js获取用户实时地理位置

    js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...

  7. js中的class

    js中的class 类写法 class SuperClass { constructor(option) { this.a = option; } fn() { console.log(this.b) ...

  8. java - 读取,导出 excel文件数据

    首先需下载poi java包,添加至构建路径, 写处理方法: import java.io.FileInputStream;import java.io.FileOutputStream;import ...

  9. Python 面向对象 (补充) , 反射 , 内置函数

    面向对象中内置函数 issubclass方法: 检查第一个参数是否是第二个参数的子子孙孙类     返回  :   是一个布尔值 class Base(object): pass class Foo( ...

  10. .net 连接ORACLE中文显示乱码解决方案

    FYI由于历史的原因,早期的oracle没有中文字符集(如oracle6.oracle7.oracle7.1),但有的用户从那时起就使用数据库了, 并用US7ASCII字符集存储了中文,或是有的用户在 ...