html高度塌陷以及定位的理解

高度塌陷的含义：

　父元素的高度，默认被子元素撑开，目前来讲box2多高，box1就多高。此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素， 导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动， 导致整个页面的布局混乱 。

 

定位(position)：

　　定位一共有4种：relative,absolute,fixed,static

　　relative:相对定位就是在自己原先的位置上进行定位，没有脱离文档流，还占着原先的位置，比如设置position:relative,left:2px;top:2px,这个意思是在原来的位置上往左移动了2个px,往后面移动了2px

　　absolute:绝对定位就是相对于已经定位的离得最近的父元素进行定位的

　　fixed:固定定位，相当于固定在浏览器的某个位置。

这几天在慕课上看视频学习，偶然听到几个老师都说：CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置position：relative。注意，前面一句是没有问题的，在没有父元素设置定位的话，默认就是以body来定位的，但是后面一句，要想相对父元素定位，父元素必须设置相对定位（relative），根据我的开发经验和查阅相关资料确认后发现，这是不对的。

正确的理解姿势是：

相对定位：相对于块级元素（或行内块）自身位置进行定位；

绝对定位：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

注意css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的。举个栗子：

如下图：

　　1 先验证定位会不会相对于最近定位的兄弟元素盒子去进行定位

结果：并不会相对于兄弟元素盒子去进行定位，会以默认的body进行定位

　　2 验证定位是不是相对于父亲盒子去进行定位

结果：会相对于父亲div进行定位

　　3 验证是不是对最近的父亲div去进行定位

结果：会相对于最近的父亲盒子进行定位