转：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(行内元素)的时候起作用。
我们先用块状元素来做个示例：

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

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

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

  1. <style type="text/css">
  2.     strong { background: #808080; }
  3.     em { background: #ffd800; }
  4.     span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
  5. </style>
  6. <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来做示例

  1. <body style="background: yellow;">
  2.     <div style="background: #fff">
  3.         A
  4.         <div style="background: #81b6ff">
  5.             A - 1
  6.             <div style="background: #b6ff00;">
  7.                 A - 2
  8.             </div>
  9.         </div>
  10.     </div>
  11. </body>

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

  1. <body style="background: yellow;">
  2.     <div style="background: #fff">
  3.         A
  4.         <div style="background: #81b6ff">
  5.             A - 1
  6.             <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
  7.                 A - 2
  8.             </div>
  9.         </div>
  10.     </div>
  11. </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。

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

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

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

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

  1. <span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">
  2.         我的display属性由inline变成了block
  3. </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. Java——设计模式（装饰模式_IO）

     /* * 装饰设计模式: *  对一组对象的功能进行增强时,就可以使用该模式进行问题的解决; * 装饰和继承都能实现一样的特点:  就是进行功能的扩转增强. * */ public class  ...

  2. Linux dbg debugging

    http://h41379.www4.hpe.com/doc/84final/4538/4538pro_contents.html https://kgdb.wiki.kernel.org/index ...

  3. centos6.7 本地yum源配置

    [BEGIN] 2016/11/9 21:47:31[root@11g ~]# mount /dev/cdrom /mediamount: block device /dev/sr0 is write ...

  4. 给OCR文字识别软件添加图像的方法

    ABBYY FineReader 12是一款OCR图片文字识别软件,而且强大的它现在还可使用快速扫描窗口中的快速打开.扫描并保存为图像或任务自动化任务,在没有进行预处理和OCR的ABBYY FineR ...

  5. cocos2dx 2.x 竖屏

    1, xcode中General->Device Orientation只勾选Portrait. 2, 修改RootViewController.mm中下面代码: // For ios6.0 a ...

  6. cocos2dx 2.x 在ios8下clippingNode不起作用 解决办法

    升级xcode到6.1后,跑以前的cocos2dx 2.x写的项目,发现clippingNode失效了. 后来看到这个帖子,解决了我的问题:http://discuss.cocos2d-x.org/t ...

  7. OpenJudge计算概论-排队游戏【这个用到了栈的思想】

    /*======================================================================== 排队游戏 总时间限制: 1000ms 内存限制: ...

  8. 【redis】 linux 下redis 集群环境搭建

    Redis集群 (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对应的redis节点的ip和端口对应关系如下) 127.0.0.1:63791 ...

  9. [mysql] mysql 5.6.27 innodb 相关参数

    mysql> show variables like '%innodb%';+------------------------------------------+--------------- ...

  10. 使用UpdatePanel 页面脚本不起作用

    在后台中这样注册js方法 ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "", " ...