CSS 对 position 的学习

任何元素的默认position的属性值都为static（静态），但我们在布局的时候也会经常用到relative（相对）以及absolute（绝对）这两种属性。

如果用position来进行布局，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素padding的属性影响，当然也可以用relative，不过到时候计算的时候不要忘记padding的值。

使用relative时有几点需要注意：

1. 元素设置了relative时，是相对于元素本身位置进行定位；
2. 元素设置了relative后，可以通过“T-R-B-L”改变元素当前所在的位置，但元素移位后，同样点有当初的物理空间位；
3. 元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变。

absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

【absolute：绝对定位】
  默认参照浏览器左上角，配合TOP、RIGHT、BOTTOM、LEFT（以下简称TRBL）进行定位，具有以下属性：
  （1）无TRBL的情况下，参照父级左上角；无父级，参照浏览器左上角；无父级元素，但存在文本，参照最后最后一个文字的右上角为原点但是不断开文字，覆盖与上方。
  （2）如果设定TRBL，并且父级没有position属性（不论是absolute还是relative），都是默认以浏览器左上角开始定位，位置由TRBL决定。
  （3）如果设定TRBL，并且父级有position属性（不论是absolute还是relative），默认以父级左上角为原点开始定位，位置由TRBL决定。
 以上三点我们就可以总结出：若想使用absolute进行定位，那我们就要明确两点：
 第一：设定TRBL

 第二：父级设定position属性

  【relative：相对定位】
  默认参照父级原始点为原始点；如果无父级，以文本的上一个元素的底部为原始点，配合TRBL进行定位；当父级内有padding属性时，参照父级内容区的原始点进行定位。
  （1）不存在TRBL，参照父级左上角；没有父级，参照浏览器左上角；没有父级元素，但是存在文本，则以文本的底部为原始点进行定位并将文字断开。
  （2）设定TRBL，并且父级没有设定position属性，以父级左上角为原点进行定位
  （3）设定TRBL，并且父级设定position属性，以父级左上角为原点进行定位，但是如果父级有padding属性，那么以内容区域的左上角为原点进行定位。

   综上所述，relative均以父级左上角进行定位，但是受padding的影响。

   这样，我们就可以得知为什么要选用relative定位父级元素，absolute定位内部元素。因为我们布局时用relative后，就不只是用float布局页面了，还可以用TRBL进行布局。但是如果用absolute来布局页面，所有的DIV都相对于浏览器的左上角定位，这样适配性会大大下降，用户体验度很低。所以只能用与将某个元素定位于属性为absolute的元素的内部的某个位置。

浮动元素引起的问题和解决办法？

浮动元素引起的问题：

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决办法：
1.额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2.使用after伪类 #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 
3.浮动外部元素 
4.设置overflow为hidden或者auto