转：http://www.cnblogs.com/coffeedeveloper/p/3145790.html

Position属性

　　Position的属性值共有四个static、relative、absolute、fixed。

Static

　　所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right。在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。

Relative

　　我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。relative的偏移是基于对象的margin的左上侧，它可以在display:inline(行内元素)的时候起作用。
我们先用块状元素来做个示例：

<style type="text/css">
    div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>

　　右图中的黑色虚线部分为元素B的默认普通流位置，而黄色线则代表元素B的相对偏移量。我们可以很明显的看出在元素C依然还是保留在原位，并没有因为元素B发生了偏移而随之变化。

　　我们再来看看行内元素（在这里用大家最常用的span来做示例）

<style type="text/css">
    strong { background: #808080; }
    em { background: #ffd800; }
    span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>

　　在这里对span进行width属性的赋值（为100px），但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，没有变成100px。换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）--->relative只是视觉上发生位置变化不会改变display。

Absolute

　　俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。当元素的父级设置了position属性，且position的属性值为absolute或者relative时，这个时候，元素将按照这个父级来进行定位。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性！

　　我们先用一个默认嵌套的DIV来做示例

<body style="background: yellow;">
    <div style="background: #fff">
        A
        <div style="background: #81b6ff">
            A - 1
            <div style="background: #b6ff00;">
                A - 2
            </div>
        </div>
    </div>
</body>

　　现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值

<body style="background: yellow;">
    <div style="background: #fff">
        A
        <div style="background: #81b6ff">
            A - 1
            <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
                A - 2
            </div>
        </div>
    </div>
</body>

可以看到（A-2）最终是根据body来产生了位移，让我们对比分别设置一下父元素position。

从上面的图，我们可以总结以下几个结论。

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：

  • Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
  • IE7下会附加到父元素的末尾。

一些Position小知识

1）应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。

2）position: absolute忽略根元素的padding。

<div id="a" style="background: #fff; width: 200px;">
        A
    <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">
            A - 1
        <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">
                A - 2
        </div>
    </div>
</div>

3）在IE6/7中设置position属性后会导致z-index属性失效

<!-- 解决方案，父元素设置一个更大的z-index值即可 -->
<div style="z-index: 2;">
  a
    <div style="position: relative; z-index: 1;">
      b
    </div>
</div>

4）行内元素在应用了position：absolute之后会改变display。

<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">
        我的display属性由inline变成了block
</span>

因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。

5）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。

Fixed

在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：

  1. 会改变行内元素的呈现模式，使display之变更为block。
  2. 会让元素脱离普通流，不占据空间。
  3. 默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

对CSS中的Position属性的一些深入探讨的更多相关文章

  1. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  2. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  3. css中关于position属性的探究（原创）

    关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记.   首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...

  4. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  5. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  6. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  7. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

  8. CSS中的position属性笔记

    一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...

  9. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

随机推荐

  1. spring源码学习之：spring容器的applicationContext启动过程

    Spring 容器像一台构造精妙的机器,我们通过配置文件向机器传达控制信息,机器就能够按照设定的模式进行工作.如果我们将Spring容器比喻为一辆汽车,可以将 BeanFactory看成汽车的发动机, ...

  2. pyCharm使用

    1.修改文件和代码模板 修改文件头 2.显示行号

  3. 二十四种设计模式：原型模式(Prototype Pattern)

    原型模式(Prototype Pattern) 介绍用原型实例指定创建对象的种类,并且通过拷贝这个原型来创建新的对象.示例有一个Message实体类,现在要克隆它. MessageModel usin ...

  4. Vs 2015 中一些新的语法支持

    又是语法糖. 1, if (tdata != null && tdata.Data != null) 等价于   if (tdata?.Data != null)   2, int a ...

  5. maxscript, 数组和字符串下标是从1开始的

    maxscript中数组和字符串下标是从1开始的.

  6. JQuery Pagenation 知识点整理——(function($){...})应用（20150517）

    首先:(function($){...})为Jquery提供的匿名函数: 代码实例(一) <script type="text/javascript"> (functi ...

  7. mysqldump: Got error: 1556: You can't use locks with log tables. when using LOCK TABLES

    mysqldump: Got error: 1556: You can't use locks with log tables. when using LOCK TABLES 我是把一些mysqldu ...

  8. .net平台的RSA实现以及与Delphi之间的互操作性

    .net平台下面的RSA算法实现是RSACryptoServiceProvider,如果安装了 Microsoft Enhanced Cryptographic Provider,则 RSACrypt ...

  9. dismissViewControllerAnimated有延迟

    dismissViewControllerAnimated:completion:在应用中运行正常,就是不知道为什么出现了几秒钟的延迟: [api loginWithUsername:[dict ob ...

  10. PHP基础学习笔记（一）

    1.初步了解PHP+ php是一种运行在服务端的跨平台的脚本语言. + php语法: <?php echo "welcome!": ?> php像javascript语 ...