css的定位问题

• css中的三种基本位置机制：①普通流 ②浮动 ③定位

  ①普通流(文档流)：页面中元素所呈现的位置就是由编程人员在HTML文件中所规定的位置决定（将窗体自上而下分成一行一行的，并且在每行中按从左至右的挨次排放元素）。
  ②浮动:放到下一篇中再来细谈。
  ③定位：利用定位，可以准确地定义元素框相对于其正常位置应该出现在哪里，或者相对于父元素或另一个元素甚至浏览器窗口本身的位置。

• css中的定位是通过使用position属性，有static、relative、absolute、fixed四个值，下面来分别讨论这四个值的用法。

  ①static:它为初始值(默认值)，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于父元素当中。

  ②relative:它称为相对定位，元素框会偏移某个距离，元素仍保持其未进行相对定位时的形状，它原本所占的空间仍然保留，所以相对定位的移动会导致覆盖其他元素。偏移某个距离是通过设置top、left、right、top值，让其相对于它的原来位置进行定位。

  ③fixed:它称为固定定位，但是它的表现却类似于将position设置为absolute,只不过其包含块是视窗本身(意思是相对于浏览器窗口来进行绝对定位的)。

  ④absolute:它为绝对定位，当设置为绝对定位时，它将会从文档流中删除，原来的空间会关闭，不再占据。此时它的定位是相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块（画布、HTML元素、body元素）。这里重点说一下包含块是另一个元素的情况：另一个元素必须是“最近的已定位的祖先元素”(祖先元素可以理解为比其早出现在文档流中的而且是离其最近的且已经定位了:static\relative\position\fixed)。元素进行绝对定位后生成一个块级框，而不论它在文档流中初始为何种类型的框。