转：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. 【BZOJ2013】【JSOI2008】球形空间产生器

    看chty代码 原题: BZOJ挂了--等好了补上题面 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这 ...

  2. C++@子类类型转换为父类类型

    static_cast(*this) to a base class create a temporary copy. class Window { // base class public: vir ...

  3. 【转】 iOS日常学习 - iOS10上关于NSPhotoLibraryUsageDescription等问题

    原文网址:http://blog.csdn.net/wang631106979/article/details/52578001 最近升级了Xcode8.0,真是很多坑啊,填完一个来另外一个,今天又遇 ...

  4. CentOS6.4安装Golang环境

    什么是Go? Go是一门并发支持.垃圾回收的编译型的系统编程语言,目的是为了创造一门具有在静态编译语言的高性能和动态语言的高效开发之间拥有良好平衡点的一门编程语言. Go的主要特点有哪些? 类型安全和 ...

  5. java 类型转json格式

    json-lib-2.4-jdk15.jar List<People> mapPersonTypes = null; private JSONArray json_mapPersonTyp ...

  6. 数据恢复-extundelete

    http://extundelete.sourceforge.net/options.html 误删除/usr/share目录因此考虑恢复目录过程如下:1.选用extundelete软件来进行恢复,源 ...

  7. gitignore 忽略文件夹

    上面问题,按理说只要在.gitignore文件中加上 /dockAni/Library/ 即可实现. 但是我这样做了以后却发现sourceTree中仍然会列出Library中的文件. 最后在这个帖子中 ...

  8. OpenJudge计算概论-求出e的值

    /*======================================================================== 求出e的值 总时间限制: 1000ms 内存限制: ...

  9. 【总结】IE和Firefox的Javascript兼容性总结(转)

    文章转自:http://www.cnblogs.com/wiky/archive/2010/01/09/IE-and-Firefox-Javascript-compatibility.html 长久以 ...

  10. 通过新浪ip地址库获得用户的省份、城市等信息

    <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> ...