使用position设置经典的网站前端结构
能脱离文档流的设置：
- float:left/right
- position:absolute; 绝对定位
- position:fixed; 固定定位
//搞清楚position的属性值的意思就容易明白
使用position布局能使得标签脱离文档流（但是属性值为relative除外），这个脱离文档流是不会受到父级标签约束的，除非：
若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| #div1 { | |
| width: 200px; | |
| position: absolute; | |
| height: 600px; | |
| background: darksalmon; | |
| top: 10px; | |
| left: 5px; | |
| } | |
| #div2 { | |
| width: 700px; | |
| height: 1200px; | |
| background: yellowgreen; | |
| position: absolute; | |
| left: 220px; | |
| top: 10px; | |
| } | |
| #div3 { | |
| width: 300px; | |
| height: 600px; | |
| background: hotpink; | |
| position: absolute; | |
| left: 930px; | |
| top: 10px; | |
| } | |
| #div5 { | |
| background: chartreuse; | |
| position:relative; | |
| height: 620px; | |
| width: 1240px; | |
| top: 0px; | |
| left: 0px;; | |
| } | |
| #head { | |
| width: 1240px; | |
| height: 150px; | |
| background: coral;; | |
| } | |
| #footer { | |
| width: 1240px; | |
| height: 150px; | |
| float: left; | |
| background: darkturquoise; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="head">head</div> | |
| <!--div5的position设置为relative，意思就是：div5还是在流当中，遵从由上到下排列，只是设了top和left后，就往右或下方挪--> | |
| <!--div5的position设置为absolute，那么div5就脱离了文档流，可以不理head的位置，随意按top和left来相对浏览器摆放，除非div5又被一个设了position的div包裹--> | |
| <div id="div5"> | |
| <!--div1,div2,div3设了position: absolute，那么就脱离了文档流，如果div5不设置position，那么div123的top和left就会相对于浏览器显示的地方--> | |
| <!--如果div5设置了position，无论position设置了什么,那么div1,2,3的top和left就相对于div5--> | |
| <div id="div1">B</div> | |
| <div id="div2">A</div> | |
| <div id="div3">C</div> | |
| </div> | |
| <div id="footer"></div> | |
| </body> | |
| </html> |
