CSS定位部分


  CSS 定位 (Positioning)对布局的重要性不言而喻,它有三种基本的定位机制:普通流、浮动和绝对定位。一切皆有框为CSS定位的核心思想,块框、行内框、无名块框、行框(Line Box),都可以看做放置于矩形框内的元素,所谓的定位即为确定它们位置的规则。

  相对定位是指定位相对框的原始位置发生移动,但元素原先所占空间仍然存在且保留;绝对定位则将元素从它原先存在的位置消失,而定位指它相对于其祖先元素的位置变化。在绝对定位中如果不存在祖先元素,则定位的参照物定义为画布或HTML元素本身。

  浮动框与被绝对定位的元素一样不在普通流中,所以普通流中的框元素在定位时不会考虑浮动框的存在。如果框太窄,行宽不足以容纳多个浮动元素,则会产生浮动元素的下降以避免撑破父元素框;如果下降产生时,第N个浮动框的上边距的到父元素框的垂直距离小于左边元素下边框到父元素框的垂直距离,则会发生被“卡住”的状况。见图片

  如果一个div元素框中只有浮动元素,则因为浮动框会自动脱离普通流,最后造成div元素并不能包围浮动元素。为了避免这种状况的发生,一个解决方法是添加一个“空元素”到div元素框之内再进行清除,这种方法无疑会增加一些实际上“无意义”的代码;另一种办法则是让它们的父元素也进行浮动,但这种方法会导致后面的元素也受到浮动的影响,所以有些布局是让所有的元素都进行浮动,然后在页尾进行清除,这种方法能有效地清除和减少不必要的标记。见范例

CSS 定位属性

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

我也说两句儿......