随着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. window下安装mysql

    参考地址: https://www.cnblogs.com/lmh2072005/p/5656392.html http://www.jb51.net/article/90302.htm 一.下载安装 ...

  2. LaunchImage添加以及设置无效处理

    1.添加LaunchImage 2.添加所需要图片即可,出现un..可以删除,警告也随之而去,并删除LauchImage Assets之后重新添加 3.确定设置是否一样 4.发现启动后加载不了启动图, ...

  3. gen_fsm的学习笔记

    网上搜索gen_fsm的例子,90%都是code_lock,依葫芦画瓢弄了下,记录一些学习心得 init(UnLockCode) -> process_flag(trap_exit,true), ...

  4. 1060 Are They Equal

    题意: 给出两个浮点数(最大不超过10^100),以及存储的有效位数,判断这两个数是否相等.如12300和12358.9若存储的有效位数为3,则均表示为0.123*10^5,因此视为相等. 思路:[字 ...

  5. 张瀚荣：如何用UE4制作3D动作游戏

    转自:http://www.gamelook.com.cn/2015/06/218267 GameLook报道/ 6月5日,2015年第三期GameLook开放日‧虚幻引擎专场活动在上海正式举行,此次 ...

  6. modelform实例学习

    先来回顾下form的用法 一对多关系,form显示的是下拉框 多对多关系,form显示的是多选框 modelform的用法 modelsform的写法 from django.forms import ...

  7. 第三章 深入分析Java Web中的中文编码问题

    3.1 几种常见的编码格式 3.1.1 为什么要编码 一个字节 byte只能表示0~255个符号,要表示更多的字符,需要编码. 3.1.2 如何翻译 ASCII码:有128个,用一个字节的低7位表示. ...

  8. TIMEQUEST学习之黑金动力（二）

    之一就是第一章,这是第二章.在开始之前,要对第一章内容说说我理解到的: (1)时序分析是节点对节点的分析.(2)这个latch edge是锁存上一个lunch edge输出的(满足建立关系的)值.(3 ...

  9. Cocos2D中的内部函数

    virtual bool isVisible();    // 是否可见    virtual void setVisible(bool visible);      // 设置是否可见    boo ...

  10. Mysql提权

    获取最高用户root的密码 获取方式:数据库配置文件.端口破解口令.下载数据库文件获取等1.数据库配置文件config,conn,data,sql,include,common,inc等命名文件2.数 ...