css布局的相对与绝对定位

【position:absolute】

意思是：他的意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有如下属性：

1)若是没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,若是在没有父级元素的状况下，存在文本，则以它前面

的最后一个文字的右上角为原点进行定位可是不断开文字，覆盖于上方。

2)若是设定TRBL，而且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

3)若是设定TRBL，而且父级设定position属性(不管是absolute仍是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即便父级有Padding属性，对其也不起做用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。

以上三点能够总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有知足两个条件，

第一：设定TRBL

第二：父级设定Position属性

上面的这个总结很是重要，能够保证你在用absolue布局页面的时候，不会错位，而且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。

只要有一点不知足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点，已经定位好的板块，当浏览器的大小改变，父级元素会随之改变，可是设定Position属性为absolute的板块和父级元素的位置发生改变，错位了，这就是由于此时元素以浏览器的左上角为原点的缘由。

初学者很容易犯错，不清楚Position属性为absolute的板块，若想定位到父级板块中，而且当浏览器的大小改变或显示器的分辨率改变，布局不发生改变，是须要知足两个条件的，只要有一点不知足，元素就会以浏览器左上角为原点，从而致使页面布局错位。

【position:relative】

意思是相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有如下属性：

1)若是没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条同样)，若是在没有父级元素的状况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolut不一样)。

2)若是设定TRBL，而且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不一样)

3)若是设定TRBL，而且父级设定position属性(不管是absolute仍是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolut同样)。若是父级有Padding属性，那么就之内容区域的左上角为原点，进行定位(后半段和absolut不一样)。

以上三点能够总结出，不管父级存在不存在，不管有没有TRBL，均是以父级的左上角进行定位，可是父级的Padding属性会对其影响。

综合上面对relative的叙述，咱们就能够将position属性为relative的DIV视成能够用TRBL进行定位的的普通DIV，或者说只要将咱们平时布局页面的div的CSS属性中加上position:relative后，就不仅是用float布局页面了，还能够用TRBL进行布局页面了，或者说加上position:relative的DIV也能够像普通的DIV进行布局页面了，只不过还能够用TRBL进行布局页面。可是position属性为absolute不能够用来布局页面，由于若是用来布局的话，全部的DIV都相对于浏览器的左上角定位了，因此只能用于将某个元素定位于属性为absolute的元素的内部某个位置，这样咱们就能够总结比较重要的结论

属性为relative的元素能够用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置

既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，若是父级元素没有position属性那么absolute元素就会脱离父级元素，可是若是是布局页面，父级元素position的属性又不能为absolute，否则就会以浏览器左上角为原点了，因此父级元素的position属性只能为relative！

=============================================

总结：若是用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，由于它不受父级元素的padding的属性影响，固然你也能够用position，不过到时候计算的时候不要忘记padding的值。

=============================================

 

可是定位(position)有一个缺点，不会自适应内部元素的高度，因此平时咱们在布局页面的时候，若是某个或者某些模块高度永远不变，就能够用定位，可是建议你们布局页面的时候，仍是要以Float为主，Position为辅！这样你才能作出高质量的页面。