position

css中定位

相信大家都用过position来对元素定位，很多定位的地方用margin，padding感觉很麻烦，而且如果用js来改变img的src时，如果图片的大小不一，必定会对相邻用margin，padding定位的元素的位置产生偏差！

但是如果都用position来定位，也会有很多的麻烦，由于电脑的分辨率不一样，可能在你的电脑上用position定位后感觉还可以，结果一拿到其他人的电脑上就变了样，（大地方用margin，padding。细节上用position。）

1. position
   
   1. position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。(一般来说，不用指定static，除非想要覆盖之前设置的定位。)(元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。)
   2. relative:可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素(在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。)
   3. absolute:元素脱离了文档(在文档中已经不占据位置了)，可以准确的按照设置的 top,bottom,left 和 right 来定位。
      
      1. clip 属性剪裁绝对定位元素（矩形）（看下面的例子！）
      2. 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
      3. js语法：object.style.clip="rect(0px,50px,50px,0px)"
      4. 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。

---

img{
  position:absolute;//必须有；
  clip:rect(0px,100px,200px,0px);
  }

position与文档流

1、只要元素设置了 postion : absolute | relative | fixed ， 该元素就会脱离文档流。
但是relative元素是个特例，因为该元素脱离了文档流，但是它原本所占的空间仍然占据文档流。

positon 与 display

1、relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，

position 与 float

1、一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，不再同一级
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。