Position布局
// position布局
.wrapper {
position: relative;
// wrapper的高度必须要比left/right的高度高
//height: 600px;
}
.left,.right {
position: absolute;
top: 0;
width: 200px;
}
.left {
left: 0;
background-color: #F00;
}
.right {
right: 0;
background-color: #0F0;
}
.main {
margin: 0 210px;
background-color: #00F;
}
上面那种方法是传统的绝对定位布局,简单粗暴,且这种布局不太会影响元素内部的布局。但若没有给wrapper设置min-width的话，left和right会因浏览器窗口变小，main的空间从有到无，然后两者就被重叠在一起了。
这里记录一下定位相关的知识点
absolute
包裹性
包裹性简单点说就是inline-block化,即当前元素若被设置成absolute后，则其默认100%显示的元素便会被设置成自适应内部元素的宽度。
破坏性
破坏性换句话说就是指父元素塌陷，不同于margin collapse仅会造成高度塌陷,absolute造成的塌陷会让其父元素宽高都塌掉(float仅会让高度塌陷)。
被设置了absolute的子元素不存在文档流中，不管其static兄弟元素的z-index被设置成多大，都不会覆盖掉absolute元素，除非,absolute元素的z-index被设置成负值。
transform
如果含有overflow不为visible的父级元素，同时，该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static属性的声明，则overflow对该absolute元素不起作用。
这一个解释起来比较拗口，举个例子():
图片自身transform
overflow容器transform
