Style中Position属性详解

Position 有四种取值static、relative、absolute、fixed ： static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定 relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。 absolute 绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的，意思就是其Position 是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。 标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。 fixed 才是真正的绝对定位，其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变， 也就是说永远可以看到， 这个做一些彩单的时候可以用。可惜的是ie还不支持。 深入理解篇： 默认的属性值都是static，静态，最关键的是 relative（相对）以及absolute（绝对）。 往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性position设置为relative就可以了。 也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。 例如如下A-B的嵌套结构 <div id="A"> <div id="B"> </div> </div> 当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。 但是如果你在A中的padding="50px" 在A中的其他没有设置postion为absolute的会随着A的padding的值而变化 但是B不会变的它的position是相对上一级的。