IT民工的坐井观天

楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。

问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

还是换个方式解读一下这几个选项吧。

 Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。
 Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : tatic;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。

1点需要提及的，z-index，一个relative元素（允许我使用这样不是很严谨的说法）默认z-index高于其他所有static元素，即使你显式的为某个static元素设置高于relative元素的z-index为99999。

 Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top ， bottom 属性中的至少一个，而作为参照的顶点是什么呢？默认情况下是HTML元素，也就是页面的左上角，如果该元素具有一个relative的父节点，那顶点则变为该relative父节点。如果合并一下这句比较晦涩的话就是，包含在relative元素里的偏移值由relative元素左上角开始计算，否则都将以页面左上角计算。

关于absolute元素最重要的一点，就是设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。这点和float元素有些类似。

//==============================================

节译自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

有些重新演绎之过，但也是为了能够更加适应中文的表达方式。

1,279 Views