css的定位（Position)布局

当一个元素具有position:absolute属性时，它的位置由下列规则确定

1、如果该元素没有TRBL,以父元素（直接父元素）中在其之前的元素逐一定位后，紧跟最后一个元素定位，若之前没有其他元素，则以父元素的左上角定位。没有直接父元素时，以其之前的元素逐一定位后，紧跟最后一个元素定位。

2、如果设定TRBL,并且父级（祖先）没有设定position属性（指定为absolute或relative),则当前元素以浏览器左上角为原点进行定位，位置由TRBL决定。

3、如果设定TRBL,并且父级（祖先，按照层次关系逐级向上找）设定position,则以父级的左上角为原点进行定位，位置由TRBL决定。父级的padding对其无影响。

总结：如果想把一个定位属性为absolute的元素定位于其父级元素内，必须满足a)设定TRBL。b)父级设定position属性。如果一个元素只设定absolute，没有设定TRBL,其定位类似relative,只是不在文档流中占位置。

 

当一个元素具有position:relative属性时，它的位置由下列规则确定

1、如果该元素没有TRBL，以父级元素的内边据Padding左上角进行定位,如果在同一个父元素中，该元素之前文档流中还有其他元素，则该元素的顶部，其margin与其之前的元素margin合并后定位，该元素左部以父级元素的内边据Padding左部定位。

2、如果该元素设定TRBL,以该元素没有TRBL定位后，再根据TRBL偏移。（该元素与之前元素参照时也以之前元素没有TRBL时的位置为准）

总结：一个元素定位属性为position:relative，以父级元素的内边据Padding左上角进行定位.

 

CSS定位是基于元素的父子关系，先定位父元素，再用父元素作参照定位子元素。子元素的定位只受父元素（祖先）及兄弟元素的影响，不在一个继承链上的元素不会彼此影响之间的定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 X(HTML) 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

CSS 相对定位（position:relative）

对一个元素进行相对定位，它将出现在文档流中它所在的位置上。然后，可以通过设置垂直或水平位置（TRLB)，让这个元素“相对于”它的起点进行移动。其原来的位置，它还占据着。（在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。）

CSS 绝对定位（position:absolute）

绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

Position 布局总结

如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。定位(position)有一个缺点，不会自适应内部元素的高度，所以平时我们在布局页面的时候，如果某个或者某些模块高度永远不变，就可以用定位，建议大家布局页面的时候，还是要以Float为主，Position为辅！