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