CSS布局中定位问题

定位

定位：将指定的元素摆放到页面指定的位置
通过定位可以任意的摆放元素
通过position属性进行定位
static 默认值，没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位，也是绝对定位的一种

开启元素定位后，可以通过left right top bottom 来设置偏移量

相对定位

开启相对定位
1.开启后，不设置偏移量，无变化
2.相对原来的位置进行偏移
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素性质，块还是块，内联还是内联

绝对定位

开启绝对定位：
1.元素脱离文档流
2.不设置偏移，位置不发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
（一般子元素开启绝对定位，都会同时开启父元素的相对定位）
如果所有的祖先元素都没开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素性质，
内联元素变为块元素
块元素的宽度和高度默认都被内容撑开

固定定位

固定定位
是绝对定位的一种，大部分和绝对定位一致
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
会固定在浏览器的位置，不随滚动条滚动
IE6不支持

-------------------------------------------------------------------------------------------------------------------------

表单设置边框时，会重叠的问题

1.高度坍塌

2.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传给父元素
使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠

.clearfix:before,
.clearfix:after{
       content: "";
       display: table;
       clear: both;
}

经过修改后的clearfix是一个多功能的
既可以解决高度塌陷
又确保父元素和子元素的垂直外边距不会重叠