CSS position:absolute全面了解

前端  /  管理员 发布于 7年前   220

一、绝对定位的特征

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

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

请看下面代码：

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.          &nbs

  • 上一条：
    CSS3制作圆角图片和椭圆形图片
    下一条：
    浅谈CSS浮动的那点事儿

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客