序号 | 有无TRBL | 有无父级 | 有无文本 | 有无position |
1 | 无 | 无 | 无 | 无 |
2 | 无 | 无 | 有 | 无 |
3 | 有 | 无 | 无 | 有 |
4 | 有 | 有 | 无 | 有 |
5 | 有 | padding | 无 | relative |
6 | 有 | padding,absolute | 无 | 无 |
7 | 有 | 有 | 无 | absolute |
8 | 有 | absolute | 无 | absolute |
9 | 有 | relative | 无 | absolute |
补充:所有的元素默认定位是position:absolute。
结果:
1、定位相对于浏览器的左上角。
2、在文字后,紧靠左边,不覆盖文字。
3、父级没有position,则相对于浏览器的左上角。
4、父级的position(absolute&&relative),相对于父级的左上角。
备注:父级的padding对其不起作用。
5、是padding和TRBL综合的结果。
6、和5的效果是一样的。
7、子级元素会脱离父级元素。
8、父级元素会定位于浏览器左上角,子集定位于父级。
9、5和9区别:9会浮在内容上,5后的内容会在5后面。