css 元素定位

定位方式 4+1：利用position有4种，一种float

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：超出范围滚动显示
• 常用方式：
  • 1.解决粘连问题
  • 2，当内部元素都浮动时，外层高度自动时别为0，需要加overflow：hidden