CSS布局之postion、float、z-index

position(属性)

  • static
    如果没有指定position,浏览器默认position为static,元素处于文档流中,浏览器根据标签来识别到底是块元素还是行内元素。指定的top、right、bottom、left、z-index皆无效,文档流后面的节点会遮盖前面的节点。

  • fixed
    固定位置,根据TRBL确定位置,可以实现类似常驻侧边栏或者固定header、footer的效果。

  • relative
    相对于原有位置,根据TRBL进行偏移(原有位置所在空间仍会保留)。

  • absolute
    相对于position为非static属性的祖先节点,进行偏移,如果祖先中没有非static节点,则相对于body进行偏移。 absolute与relative的区别在于:
    a) absolute元素的原点(top、left)在非static祖先节点的原点上
    b) relative元素的原点(top、left)是在自己没有设置position: relative;(其实就是自己为static)时的原点上

  • inherit
    继承父节点的position(实际的position布局方式只有四种:static、fixed、relative、absolute)。

float(常见问题)

  1. 浮动标签没有被父标签包裹
    在父标签中设置overflow: auto; (IE6中还需要在父标签中设置zoom: 1;)

  2. 清除浮动
    在需要清除浮动的标签上使用css的clear属性(left、right、both)

z-index

  1. 非static元素会覆盖在static元素之上
  2. z-index只对非static元素有效
  3. 如果没有指定z-index,按节点出现顺序,后面的节点会覆盖在前面的节点之上
  4. 同级元素,设置的z-index值越大越在上面(z-index>=0的元素,在没设z-index的元素之上;z-index<0的元素,在没设z-index元素之下)
  5. 优先响应同级父元素的z-index值,子元素的z-index值比较只在父元素内有效

参考

  1. position & float
  2. z-index

热评文章