关于定位及position

三种定位机制：关于这个，有一种说法是这样的，普通流（有地方也叫文档流），相对定位，和绝对定位。w3c上是这样的：普通流，浮动，和绝对定位。这里我还不能很明确的说哪一种更好。

• 普通流是按照html的顺序来定位的。当position为static时，也会按照普通流来定位。
• 相对定位，是position为relative是产生作用的，就是在框原来普通流位置上进行表象的移动，实际上在页面上占据的位置不变。不会影响其他元素的位置。
• 绝对定位，position为absolute，元素已经脱离普通流定位了，会相对于其父元素进行定位，且父元素的position不能是static。没有的则是相对于body。可以覆盖其他元素。所以需要使用z-index来控制叠放顺序，z-index越高，元素位置就越在上。要使用z-index则必须给元素的position设值，且不能是static。关于z-index更多请看这篇文章。

position几个值：

• static，静止。元素按照普通流布局，不能使用z-index等，设值top，left等均无效。
• relative，相对定位，相对元素本身的位置定位。不会影响其他元素定位。
• absolute，绝对定位，脱离普通流定位，相对于其父元素定位。覆盖其他元素。
• inherit，继承父元素。
• sticky，CSS3中新的属性，在元素没有超过屏幕高度是类似，relative，超过后类似fixed，固定住了,但绝大多数浏览器不支持。刚查了只有Firefox可以。。少用
• fixed，固定定位。设值固定位置。一直不变。

浮动：这两天的认识，浮动呢，其实是元素自己本身的浮动。将元素设为浮动后，会表现的在文档中不存在一样。后面没设的会跑上来。浮动可以左右移动，知道碰到父元素的边框和其他浮动元素边框。

<div id="wrap">
    <div class="first"></div>
    <div class="second"></div>
</div>

.first, .second {
  float:left;
  background:red;
  width:100px;
  height:50px;
  margin:10px;
}
#wrap {
  border:10px solid black;
}

关于定位及position

原文：http://www.cnblogs.com/liurenxingyu/p/4850690.html