转：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. POJ-2378 Tree Cutting

    题目大意:一棵n个节点的树,找出所有的点满足:删除它之后,产生的最大(这里节点数最多即为最大)新树中节点数不超n的一半. 题目分析:两次深搜,过程类似求重心. 代码如下: # include<i ...

  2. caffe matlab 借口怎么提取灰度图的 feature ? What happened if I mixed the color images with gray images together for training ?

    1. caffe matlab 接口提供了提取feature的脚本,但是由于中间要对这些图像进行RGB ---> BGR 的变换,卧槽,灰度图没有三通道啊?怎么破?从上午就在纠结怎么会跑着跑着程 ...

  3. Nginx-server_name匹配规则

    server_name可为IP/domain/localhost/null等任何字符串(字符串server_name也可以用来匹配),注意各个 server 块的顺序. 1.如果只有一个server, ...

  4. centos6.7 本地yum源配置

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

  5. python_redis之篇

    一.redis基本安装和简单使用 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合) ...

  6. （object sender，EventArgs e）是什么？

    object sender:发出事件的对象 EventArgs e:对象中的数据

  7. 使用面向对象思想处理cookie

    实例:使用面向对象思想处理cookie如果读者对cookie 不熟悉,可以在第七章学习它的使用方法,虽然在那里创建了几个通用函数用于cookie 的处理,但这些函数彼此分离,没有体现出是一个整体.联想 ...

  8. navicat for mysql 10.1.7注册码

    最近提示用的navicat for mysql 10.1.7过期了.网上翻了一翻,发现了一个可用的注册码,分享出来.多一个链接,给别人多一份选择 姓名,组织随意, 注册码都是:NAVN-LNXG-XH ...

  9. Android中使用WebView, WebChromeClient和WebViewClient加载网页 (能够执行js)

    Android中使用WebView, WebChromeClient和WebViewClient加载网页   在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android ...

  10. Oracle无法启动，ORA-01034、ORA-01078

    因为调整32位系统的SGA区大小时不慎,超出可用内存,造成Oracle实例无法启动,报出ORA-01034.ORA-01078等错误.如下图 sqlplus /nolog SQL> conn / ...