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(常见问题)
浮动标签没有被父标签包裹
在父标签中设置overflow: auto; (IE6中还需要在父标签中设置zoom: 1;)清除浮动
在需要清除浮动的标签上使用css的clear属性(left、right、both)
z-index
- 非static元素会覆盖在static元素之上
- z-index只对非static元素有效
- 如果没有指定z-index,按节点出现顺序,后面的节点会覆盖在前面的节点之上
- 同级元素,设置的z-index值越大越在上面(z-index>=0的元素,在没设z-index的元素之上;z-index<0的元素,在没设z-index元素之下)
- 优先响应同级父元素的z-index值,子元素的z-index值比较只在父元素内有效