一、绝对定位的特征
绝对定位有着与浮动一样的特性，即包裹性和破坏性。
就破坏性而言，浮动仅仅破坏了元素的高度，保留了元素的宽度；而绝对定位的元素高度和宽度都没有了。
请看下面代码：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位的特征</title> <style> .box1,.box2,.box3 { background-color: orange; margin-bottom: 30px; } .absolute { position: absolute; } .wraper { display:inline-block; margin-left: 300px; } .float { float: left; } .box3 { position: absolute; } </style> </head> <body> <div class="box1"> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> <img src="http://huoche.7234.cn/images/jb51/m0ru5wdsojx.jpg" alt="A picture" style="width:240px;height:180px" /> <p>这是普通流中的两幅图像。</p> </div> <div class="box2"> <img class="absolute" src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> <img src="http://huoche.7234.cn/images/jb51/m0ru5wdsojx.jpg" alt="A picture" style="width:240px;height:180px" /> <div class="wraper"> <img class="float" src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> <img src="http://huoche.7234.cn/images/jb51/m0ru5wdsojx.jpg" alt="A picture" style="width:240px;height:180px" /> </div> <p>左图，将第一幅图像绝对定位，其完全脱离文档流，并且覆盖在第二幅图像之上；由此看出，绝对定位的破坏性不仅让元素没有了高度，甚至没有了宽度。</p> <p>右图，将第一幅图像左浮动，其虽然脱离了文档流，但是并没有覆盖在其他元素之上；浮动的破坏性仅仅破坏了元素的高度，而保留了元素的宽度。</p> </div> <div class="box3"> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> <img src="http://huoche.7234.cn/images/jb51/m0ru5wdsojx.jpg" alt="A picture" style="width:240px;height:180px" /> <p>将容器绝对定位，体现其包裹性。</p> </div> </body> </html>二、绝对定位的一般规则：
元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。
绝对定位的包含块，是其最近的已定位的祖先元素。
如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。
如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。
如果没有已定位的祖先元素，元素的包含块定义为初始包含块。
偏移属性：top、right、bottom、left。
如果绝对定位的元素没有设置偏移属性，虽然脱离文档流，但是它的位置是原地不动的。
偏移属性可以为负值，将元素定位到包含块之外。
代码在这里：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位的一般规则</title> <style> body { background-color: #ccc; } .container { width:500px; background-color: orange; margin:20px auto 50px auto; padding:20px; border:2px solid red; } .box2 img,.box3 img, .box4 img,.box5 img { position: absolute; } .box3 img,.box4 img { left:0; bottom:0; } .box5 img { left: -30px; bottom: -50px; } .block { position :relative; height: 200px; } </style> </head> <body> <div class="container"> <div class="box1"> <p>元素绝对定位时，会完全脱离文档流，并相对于其包含块定位。绝对定位的包含块，是其最近的已定位的祖先元素。</p> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> <ul> <li>如果这个祖先元素是块级元素，包含块则为该祖先元素的内边距边界，即边框。</li> <li>如果这个祖先元素是行内元素，包含块则为该祖先元素的内容边界，即内容区。</li> <li>如果没有已定位的祖先元素，元素的包含块定义为初始包含块（一个视窗大小的矩形）。</li> </ul> </div><!--关闭box1--> </div><!--关闭container--> <div class="container"> <div class="box2"> <p>不管有没有已经定位的祖先元素，只要没有偏移量，绝对定位之后，原地不动，脱离文档流。</p> <p>下面这个已经绝对定位的图像原地没动，但是已经脱离了文档流。</p> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> </div><!--关闭box2--> </div><!--关闭container--> <div class="container"> <div class="box3"> <p>没有已经定位的祖先元素，有偏移量，绝对定位之后，以初始包含块（一个视窗大小的矩形）为基准进行偏移。</p> <p>当偏移量为left:0; buttom:0时，图像水平偏移到了初始包含块左下角（打开网页最开始的那一个视窗的左下角）。</p> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> </div><!--关闭box3--> </div><!--关闭container--> <div class="container block"> <div class="box4"> <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p> <p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:0; bottom:0时，图像到了这个容器的左下角（以边框为界）。</p> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> </div><!--关闭box4--> </div><!--关闭container--> <div class="container block"> <div class="box5"> <p>有已经定位的祖先元素，有偏移量，绝对定位之后，以已经定位的祖先元素为基准进行偏移。</p> <p>此处已经定位的祖先元素为这个图像的容器div元素，偏移量为left:-30px; bottom:-50px时，图像到了这个容器之外（以边框为界）。</p> <img src="http://huoche.7234.cn/images/jb51/hejijmenmdd.gif" alt="A picture" style="width:175px;height:100px" /> </div><!--关闭box5--> </div><!--关闭container--> </body> </html>三、用margin调整绝对定位元素的位置
绝对定位的元素，除了可以使用top、right、bottom、left进行偏移之外，还能够通过margin值进行精确定位，而且自适应性更好。
示例：
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用margin调整绝对定位元素的位置</title> <style> .box1,.box2,.box3 { display: inline-block; margin-right: 150px; border:1px solid blue; } span { background-color: red; } .box2 span,.box3 span { position: absolute; } .meng { margin-left: -3em; } .box4 { border:1px solid red; width: 500px; margin: 50px auto 0 auto; padding:20px; } li { margin-bottom: 20px; } </style> </head> <body> <div class="box1"> <span>卡哇伊</span> <img src="http://huoche.7234.cn/images/jb51/z0rkpobieop.gif" style="width:200px;height:300px" /> <span>萌萌哒</span> </div> <div class="box2"> <span>卡哇伊</span> <img src="http://huoche.7234.cn/images/jb51/z0rkpobieop.gif" style="width:200px;height:300px" /> <span>萌萌哒</span> </div> <div class="box3"> <span>卡哇伊</span> <img src="http://huoche.7234.cn/images/jb51/z0rkpobieop.gif" style="width:200px;height:300px" /> <span class="meng">萌萌哒</span> </div> <div class="box4"> <ol> <li>第一幅图，最开始的样子。</li> <li>第二幅图，两个标签绝对定位，但是不指定任何偏移量。</li> <li>第三幅图，用margin负值调整“萌萌哒”的位置，完成。</li> </ol> </div> </body> </html>放弃偏移属性而改用margin来调整绝对定位元素，其原理在于：
绝对定位的元素，在不设置偏移量的时候，它虽然完全脱离了文档流，但它还在原来的位置。
利用偏移属性进行精确定位，其具体位置是取决于绝对定位元素的包含块，不同的包含块将会有完全不一样的定位结果。
而利用margin进行精确定位，不依赖于任何其他东西，更加可控。
四、绝对定位与整体布局
如何用绝对定位来对页面进行整体布局？
简单粗暴，不学就浪费啦！！！
XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位与整体页面布局</title> <style> * { margin: 0; }/*重置所有margin为0，这一步极其重要，否则布局必乱。*/ html,body,.page { width: 100%; height: 100%; overflow: hidden; } .page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #ccc; } .header { position: absolute; height: 50px; left: 0; right: 0; background-color: purple; padding: 0 5px; z-index: 1; } .header>h1 { line-height: 50px; text-align: center; } .aside { position: absolute; top: 50px; bottom: 50px; left: 0; width: 100px; background-color: orange; } .footer { position: absolute; right: 0; bottom: 0; left: 0; height: 50px; background-color: purple; } .footer>h1 { text-align: center; line-height: 50px; } .content { position: absolute; top: 50px; right: 0; bottom: 50px; left: 100px; background-color: cyan; overflow: auto; } .content h1 { margin-top: 100px; margin-left: 50px; } .content li { margin-left: 100px; margin-top: 80px; font-size: 24px; line-height: 1.5; } ol { margin-bottom: 80px; } </style> </head> <body> <div class="page"> <div class="header"> <h1>Header</h1> </div> <div class="aside"> <h1>Aside</h1> </div> <div class="content"> <h1>实现原理</h1> <ol> <li>创建一个div.page，绝对定位，铺满全屏。</li> <li>创建一个div.header，绝对定位，设定高度。</li> <li>创建一个div.aside，绝对定位，设定宽度。</li> <li>创建一个div.footer，绝对定位，设定高度。</li> <li>创建一个div.content，绝对定位，根据周围div的宽高设定它的宽高；<br /> 以div.content元素取代原body元素，所有的页面内容都放在这里面。</li> </ol> </div> <div class="footer"> <h1>Footer</h1> </div> </div> </body> </html>以上这篇CSS position:absolute全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/19/5685300.html