定位

position和float不一样的地方：

 

 

1，在一种情况下，即使没有进行显式display定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：

<div> some text

<p>Some more text.</p>

</div>

2，行内框在一行中水平布置。可以使用水平内边距padding、边框border和外边距margin调整它们的间距.但是，垂直内边距、边框和外边距不影响行内框的高度。不过，设置行高可以增加这个框的高度。

position:

absolute
绝对定位，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed
绝对定位，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

相对定位，相对于其正常位置进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

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

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

 

position:relative 相对定位

相对自己文档流中的原始位置定位。它的特点是——不会脱离文档流。

他的位置可以使用 left、right、top、bottom、z-index等定位参数

position:fixed 相对浏览器定位

相对于浏览器的窗口进行定位。同时——它会脱离文档流

position:absolute 绝对定位

                                       ——它会脱离文档流

1，当它的父元素是  static(即没有定位）

它并非是相对于浏览器定位，而是相对于文档定位，就像$(document)和$(window)的差别，相对于文档，就是相对于整个页面来进行布局，而相对于窗口，则是相对于浏览器的可视区域进行定位。

2，它的父元素是  relative  fixed  position

它不再是相对于文档定位，而是相对于父元素定位

3，若没规定其left,right,top,bottom值，则此元素仍然按原来位置摆放。