CSS之Position

CSS2.0之后添加了Position，定位属性，主要包括四种

• static:保持元素所在文档中的位置

  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

• relative:相对于元素在文档中最原始的位置进行偏移，偏移量为设置的top/left/right/bottom
  • 参照位置为元素原始位置
  • 元素形状大小不会改变
  • 元素偏移之后，元素在文档中的原始空间仍旧保留

  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

• absolute:绝对定位，当设置为absolute之后，会重新根据元素的填充生成一个新的块，偏移量为设置的top/left/right/bottom
  • 参照位置为其所有父元素中，最靠近元素本身的一个设置了position为非static的元素所处位置
  • 元素大小或形状会发生改变，会根据它的子元素重新生成为一个会计元素
  • 元素在文档中的原始空间不会包留，会被移除，后续其他兄弟元素补进
  • 当元素没有设置了position为非static的父元素时，相对位置为document的左上角

  元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

• fixed

  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。