CSS position:absolute全面了解


一、绝对定位的特征

绝对定位有着与浮动一样的特性,即包裹性和破坏性。

就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度;而绝对定位的元素高度和宽度都没有了。

请看下面代码:

XML/HTML Code复制内容到剪贴板
  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="width:175px;height:100px" />  
  33.             <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width: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="width:175px;height:100px" />  
  38.             <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width: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="width:175px;height:100px" />  
  42.                 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width: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="width:175px;height:100px" />  
  49.             <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />  
  50.             <p>将容器绝对定位,体现其包裹性。</p>  
  51.         </div>  
  52.     </body>  
  53. </html>  

二、绝对定位的一般规则:

元素绝对定位时,会完全脱离文档流,并相对于其包含块定位。

绝对定位的包含块,是其最近的已定位的祖先元素。

如果这个祖先元素是块级元素,包含块则为该祖先元素的内边距边界,即边框。

如果这个祖先元素是行内元素,包含块则为该祖先元素的内容边界,即内容区。

如果没有已定位的祖先元素,元素的包含块定义为初始包含块。

偏移属性:top、right、bottom、left。

如果绝对定位的元素没有设置偏移属性,虽然脱离文档流,但是它的位置是原地不动的。

偏移属性可以为负值,将元素定位到包含块之外。

代码在这里:

XML/HTML Code复制内容到剪贴板
  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="width: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="width: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="width: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="width: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="width:175px;height:100px" />  
  77.             </div><!--关闭box5-->  
  78.         </div><!--关闭container-->  
  79.     </body>       
  80. </html>  

三、用margin调整绝对定位元素的位置

绝对定位的元素,除了可以使用top、right、bottom、left进行偏移之外,还能够通过margin值进行精确定位,而且自适应性更好。

示例:

XML/HTML Code复制内容到剪贴板
  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="width: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="width: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="width: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进行精确定位,不依赖于任何其他东西,更加可控。

 

四、绝对定位与整体布局

如何用绝对定位来对页面进行整体布局?

简单粗暴,不学就浪费啦!!!

XML/HTML Code复制内容到剪贴板
  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
    相关阅读:
    Mac怎么访问Windows共享文件?苹果Mac打开Windows系统共享文件的方法图解
    JS数组的遍历方式for循环与for...in
    subsonic3.0插件更新字符串过长引发的异常修复方法
    jquery图片倾斜层叠切换特效代码分享
    JS实现网站菜单拖拽移位效果的方法
    使用JQuery实现智能表单验证功能
    jQuery避免$符和其他JS库冲突的方法对比
    Win7系统桌面和开始菜单找不到ie浏览器图标问题的解决方法
    Java基础教程之封装与接口
    ThinkPHP后台首页index使用frameset时的注意事项分析
    X/HTML5 和 XHTML2
    js文字横向滚动特效
    java多线程下载实例详解
    Laravel 5框架学习之Blade 简介
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 最后的“聚餐”前的感悟 同学聚会经典祝福语 雪花飞过你的卷发 实用公务员入党申请书范文模板2014 我还很想妈 自卑是错误? 今年是新中国成立多少周年 故乡的小路700字 【精品】整顿工作作风心得体会 股权出让协议 但是,我没有 小学五年级作文450字:“买”幸福 全市党代会工作报告 我的世界小课堂作文350字 2015我的青春我做主演讲稿 一份特别的礼物作文600字 end     你若安好丶便是晴天。 这一座城,一个故事,一段回忆,一种莫名的悲伤! 无法决定,因为命中注定 是人都该有梦,所有似你的,都是梦。 小学五年级作文500字:作业在开会 领导干部个人鉴定 网络中语文的重要性500字 从那以后 我要改变作文500字 那几年,我们的都很年轻 爱运动的我 小学六年级作文600字:采蘑菇 《执法者》送给冯志明等执法犯法者 感恩父亲节,真切祝福语! 六一儿童节初三作文:感恩,丰盛的六·一午宴 小学五年级作文350字:该死的雨 环境监测质量管理之我见 小眼睛看大发展(转载)作文1100字 关于难过的QQ句子 九月一日,你好吗?550字 2016预备党员转正思想汇报 2015届本科毕业论文工作计划 泪、落下了、心、、好痛、、 祝父母重阳节祝福语 小学六年级作文1200字:第一次迟到 笑谈咱家十年变化 去沙滩玩作文400字 升五星红旗550字 学习科学发展观心得体会:做勤政廉洁的好干部 卫生制度 2015会计实习报告3000字 高速公路管理局指挥调度中心主任个人先进事迹 生与死的距离 信仰的背后 电信公司客户部经理个人先进事迹

Copyright © 2016 phpStudy |