position有点晕

Question

css 中这个position怎么用？作用在哪？谁能帮小弟讲讲，新手谅解。

Answer 1

楼主去这里看看？说不定有
http://www.dreamdu.com/css/

Answer 2

position属性其实是指本体对上级的定位。如果这么理解，就好办了。默认的属性值都是static，静态。就不用多说了。最关键的是
relative（相对）以及absolute（绝对）。
往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性position设置为relative就可以了。

Answer 3

position属性的几个取值定义：position: static、absolute、relative
      static: 默认值。如果没有指定position属性，支持position属性的html对象都是默认为static，可以这么理解：把html页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照你所编写的html标签的顺序依次呈现。
     relative: 相对定位。这个属性值保持对象所在文档流中的位置，也就是说它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，设置了relative的对象，可以通过top, left, right, bottom属性设定自己的新显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素
     absolute: 绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top, left, right, bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关了。

Answer 4

position它的四个定位属性我只谈其中两个，即：absolute和relative自我感觉就这两个比较有用。 
    absolute(绝对定位): 它的定位是相对于包含块（离它最近的设置了position属性但除过static外的父元 
素）的。这话说的好像有点绕了，可能是高中语文就没学好吧，呵呵！ 
第一、如果它没有包含块，则它会根据HTML(浏览器)原始点（左上角）去定位，而且它的最大特点是跟他相邻的DIV 
则会忽略它的存在（脱离文档流），定位后则可用TRBL(top,right,bottom,left)去布局。注意：TRBL必须在设定 
了position后方可用。 
第二、如果它有包含块，那么此DIV会根据包含块去定位，且有“撑开或占据高度”的作用。     relative(相对定位): 
首先声明一下：只要元素设置了position:absolute | relative | fixed则它就会脱离文档流。 
relative元素就很奇怪，它的相对是指相对于自己在文档流中的默认位置，因此当给它设置了TRBL之后，它原来所占的空间还在。 
   切记：顶级IDV最好别用absolute去定位，否则浏览器分辨率不同会出现问题的，因为它是相对于你的浏览器去定位的，这样你的网页会变形的，最后再说一点：就是你既然用了position去定位了，就别用float再去漂移了，这就跟你谈恋爱是一样的，你试着一脚踩两个船，不翻才怪呢！