HTML---CSS学习笔记之定位

###定位方式 4+1
####position定位

• **静态定位（文档流定位）**默认： static， 块级元素从上到下排列，行内元素从左向右排列，元素的位置通过元素的外边距控制。
  - 相对定位：relative，元素不脱离文档流，通过left/right/top/bottom从元素初始位置做位置偏移
  当元素需要改变位置，并且其它元素不受影响的情况使用相对定位

• 绝对定位：absolute， 元素脱离文档流，通过left/right/top/bottom移动元素，元素坐标相对于窗口(默认)或某一个上级元素
  当元素需要改变位置，并且不希望保留原来的位置时使用绝对定位

- 固定定位：fixed， 元素脱离文档流，通过left/right/top/bottom移动元素，元素坐标只相对于窗口。
当元素需要固定在窗口的某个位置时使用固定定位

####浮动定位

• 脱离文档流，元素从当前所在行向左或向右浮动，当撞到上级元素边框或其它浮动元素时停止
• 浮动元素一行装不下会自动换行，换行时有可能被卡主
• 当元素上面有其它元素浮动后则元素会顶上去，如果不希望元素往上移动可以给元素添加clear属性。
• 当元素的所有子元素全部浮动后，自动识别的高度为0，可以通过给元素添加overflow：hidden解决此问题。
• 通过外边距控制元素位置
• 当需要把纵向排列的元素改成横向时使用浮动定位
  ###溢出设置overflow
• hidden ：超出范围不显示
• visible（默认）：超出范围显示
• scroll：超出范围滚动显示