一、绝对定位的特征
绝对定位有着与浮动一样的特性，即包裹性和破坏性。
就破坏性而言，浮动仅仅破坏了元素的高度，保留了元素的宽度；而绝对定位的元素高度和宽度都没有了。
请看下面代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>绝对定位的特征</title> 6 <style> 7 .box1,.box2,.box3 { 8 background-color: orange; 9 margin-bottom: 30px; 10 } 11 12 .absolute { 13 position: absolute; 14 } 15 16 .wraper { 17 display:inline-block; 18 margin-left: 300px; 19 } 20 21 .float { 22 float: left; 23 } 24 25 .box3 { 26 position: absolute; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="box1"> 32 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 33 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="240px;height:180px" /> 34 <p>这是普通流中的两幅图像。</p> 35 </div> 36 <div class="box2"> 37 <img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 38 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="240px;height:180px" /> 39 40 <div class="wraper"> 41 <img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 42 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="240px;height:180px" /> 43 </div> 44 <p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p> 45 <p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p> 46 </div> 47 <div class="box3"> 48 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 49 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="240px;height:180px" /> 50 <p>将容器绝对定位，体现其包裹性。</p> 51 </div> 52 </body> 53 </html>
二、绝对定位的一般规则：
元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。
绝对定位的包含块，是其最近的已定位的祖先元素。
如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。
如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。
如果没有已定位的祖先元素，元素的包含块定义为初始包含块。
偏移属性：top、right、bottom、left。
如果绝对定位的元素没有设置偏移属性，虽然脱离文档流，但是它的位置是原地不动的。
偏移属性可以为负值，将元素定位到包含块之外。
代码在这里：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>绝对定位的一般规则</title> 6 <style> 7 body { 8 background-color: #ccc; 9 } 10 .container { 11 width:500px; 12 background-color: orange; 13 margin:20px auto 50px auto; 14 padding:20px; 15 border:2px solid red; 16 } 17 18 .box2 img,.box3 img, 19 .box4 img,.box5 img { 20 position: absolute; 21 } 22 23 .box3 img,.box4 img { 24 left:0; 25 bottom:0; 26 } 27 28 .box5 img { 29 left: -30px; 30 bottom: -50px; 31 } 32 33 .block { 34 position :relative; 35 height: 200px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="container"> 41 <div class="box1"> 42 <p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p> 43 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 44 <ul> 45 <li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li> 46 <li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li> 47 <li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li> 48 </ul> 49 </div><!--关闭box1--> 50 </div><!--关闭container--> 51 <div class="container"> 52 <div class="box2"> 53 <p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p> 54 <p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p> 55 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 56 </div><!--关闭box2--> 57 </div><!--关闭container--> 58 <div class="container"> 59 <div class="box3"> 60 <p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p> 61 <p>当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p> 62 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 63 </div><!--关闭box3--> 64 </div><!--关闭container--> 65 <div class="container block"> 66 <div class="box4"> 67 <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p> 68 <p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。</p> 69 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 70 </div><!--关闭box4--> 71 </div><!--关闭container--> 72 <div class="container block"> 73 <div class="box5"> 74 <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p> 75 <p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。</p> 76 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="175px;height:100px" /> 77 </div><!--关闭box5--> 78 </div><!--关闭container--> 79 </body> 80 </html>
三、用margin调整绝对定位元素的位置
绝对定位的元素，除了可以使用top、right、bottom、left进行偏移之外，还能够通过margin值进行精确定位，而且自适应性更好。
示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用margin调整绝对定位元素的位置</title> 6 <style> 7 .box1,.box2,.box3 { 8 display: inline-block; 9 margin-right: 150px; 10 border:1px solid blue; 11 } 12 13 span { 14 background-color: red; 15 } 16 17 .box2 span,.box3 span { 18 position: absolute; 19 } 20 21 .meng { 22 margin-left: -3em; 23 } 24 25 .box4 { 26 border:1px solid red; 27 width: 500px; 28 margin: 50px auto 0 auto; 29 padding:20px; 30 } 31 32 li { 33 margin-bottom: 20px; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="box1"> 39 <span>卡哇伊</span> 40 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="200px;height:300px" /> 41 <span>萌萌哒</span> 42 </div> 43 <div class="box2"> 44 <span>卡哇伊</span> 45 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="200px;height:300px" /> 46 <span>萌萌哒</span> 47 </div> 48 <div class="box3"> 49 <span>卡哇伊</span> 50 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="200px;height:300px" /> 51 <span class="meng">萌萌哒</span> 52 </div> 53 <div class="box4"> 54 <ol> 55 <li>第一幅图，最开始的样子。</li> 56 <li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li> 57 <li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li> 58 </ol> 59 </div> 60 </body> 61 </html>
放弃偏移属性而改用margin来调整绝对定位元素，其原理在于：
绝对定位的元素，在不设置偏移量的时候，它虽然完全脱离了文档流，但它还在原来的位置。
利用偏移属性进行精确定位，其具体位置是取决于绝对定位元素的包含块，不同的包含块将会有完全不一样的定位结果。
而利用margin进行精确定位，不依赖于任何其他东西，更加可控。
在写这篇博文的时候，absolute让我给relative带话，它说：“relative，你给我滚好吗，我这辈子都不想看到你！”
预知后事如何，请移步absolute与relative不得不说的故事！
四、绝对定位与整体布局
如何用绝对定位来对页面进行整体布局？
简单粗暴，不学就浪费啦！！！
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>绝对定位与整体页面布局</title> 6 <style> 7 * { 8 margin: 0; 9 }/*重置所有margin为0，这一步极其重要，否则布局必乱。*/ 10 11 html,body,.page { 12 width: 100%; 13 height: 100%; 14 overflow: hidden; 15 } 16 17 .page { 18 position: absolute; 19 top: 0; 20 right: 0; 21 bottom: 0; 22 left: 0; 23 background-color: #ccc; 24 } 25 26 .header { 27 position: absolute; 28 height: 50px; 29 left: 0; 30 right: 0; 31 background-color: purple; 32 padding: 0 5px; 33 z-index: 1; 34 } 35 36 .header>h1 { 37 line-height: 50px; 38 text-align: center; 39 } 40 41 .aside { 42 position: absolute; 43 top: 50px; 44 bottom: 50px; 45 left: 0; 46 width: 100px; 47 background-color: orange; 48 } 49 50 .footer { 51 position: absolute; 52 right: 0; 53 bottom: 0; 54 left: 0; 55 height: 50px; 56 background-color: purple; 57 } 58 59 .footer>h1 { 60 text-align: center; 61 line-height: 50px; 62 } 63 64 .content { 65 position: absolute; 66 top: 50px; 67 right: 0; 68 bottom: 50px; 69 left: 100px; 70 background-color: cyan; 71 overflow: auto; 72 } 73 74 .content h1 { 75 margin-top: 100px; 76 margin-left: 50px; 77 } 78 79 .content li { 80 margin-left: 100px; 81 margin-top: 80px; 82 font-size: 24px; 83 line-height: 1.5; 84 } 85 86 ol { 87 margin-bottom: 80px; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="page"> 93 <div class="header"> 94 <h1>Header</h1> 95 </div> 96 <div class="aside"> 97 <h1>Aside</h1> 98 </div> 99 <div class="content"> 100 <h1>实现原理</h1> 101 <ol> 102 <li>创建一个div.page，绝对定位，铺满全屏。</li> 103 <li>创建一个div.header，绝对定位，设定高度。</li> 104 <li>创建一个div.aside，绝对定位，设定宽度。</li> 105 <li>创建一个div.footer，绝对定位，设定高度。</li> 106 <li>创建一个div.content，绝对定位，根据周围div的宽高设定它的宽高；<br /> 107 以div.content元素取代原body元素，所有的页面内容都放在这里面。</li> 108 </ol> 109 </div> 110 <div class="footer"> 111 <h1>Footer</h1> 112 </div> 113 </div> 114 </body> 115 </html>