html中css的position定位属性

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

下面详细说一下各个属性的值。

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位（没有的话相对于Body文档本身定位）。绝对定位的元素会脱离文档流的布局，遗留下来的空间由后面元素填充。绝对定位具有包容性和破坏性。

absolute的一些特性和使用技巧：
1.当行内元素设置绝对定位后可以设置width和height。
2.不和relative拴在一起的absolute更强大，比如独立的absolute可以摆脱overflow的限制，无论是滚 动还是隐藏。
3.无依赖的绝对定位的使用，即不受relative限制的absolute定位，不使用top/right/bottom/left任何一 个属性或使用auto作为值。它会表现为，脱离文档流，并且处在原来的位置。特性是去浮动（绝对定 位生效的时候浮动一定会失效）和位置跟随（原来在什么位置，绝对定位后还是在什么位置）。利 用无依赖的绝对定位，可以轻松实现图标和文字的对其，居中和边缘对其，下拉列表对其等效果。
4.如果有两个标签都有绝对定位，那后边的层级在前。所以没有必要设置多个z-index来确立层级关 系。
5.当绝对定位方向时对立的时候，即left,right一起存在，或是top,bottom一起存在的时候，结果不是 瞬间移位，而是标签的拉伸。即这个时候，absolute的定位可以和width/height相互替换。用这个 absolute定位方向对立时的拉伸特性，可以简单解决一些效果，例如，实现一个距离右侧200像素的 全屏自适应容器层。代码可以写为：position:absolute; left:0;right:200px;top:0;bottom:0;
注意事项：容器无需固定width/height值，内部元素亦可拉伸。就算父容器的height值为auto，只要 容器绝对定位拉伸形成，也可以支持百分比高度。当absolute拉伸和width/height尺寸同时存在时， width/height设置的尺寸大于left/top/right/bottom拉伸的尺寸。

relative：生成相对定位的元素，相对于其正常位置进行定位。不脱离文档流布局，只改变自身位置，在文档流原先的位置遗留空白区域。relative提高层叠上下文是最厉害的，别的方法都不如它。relative可以从各方面限制绝对定位，如：
1.限制left/top/right/bottom定位（绝对定位的元素只能在relative的容器范围内定位）。
2.限制z-index层级（绝对定位元素的层级受relative的容器的层级的影响）。
3.限制overflow下的表现（当最近的祖先容器设置了相对定位后，绝对定位元素会受overflow的影响）
4.对于fixed定位，只有z-index层级的限制起作用。
relative的使用原则
1.尽量避免使用relative
2.最小化使用原则（非要使用的情况下可以单独在外层加div标签设置relative）

fixed：生成固定定位的元素，相对于浏览器窗口进行定位。类似于absolute，但不随着滚动条的移动而改变位置。

static：默认值，没有定位，元素出现在正常的文档流中。忽略top,bottom,left,right或者z-index。

inherit：规定应该从父元素继承position属性的值。