你的位置:首页 > 网页设计

[网页设计]CSS position:absolute浅析


一、绝对定位的特征

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

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

请看下面代码:

 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>

View Code

 

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

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

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

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

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

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

偏移属性: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:30px;15         border:2px solid red;16       }17 18       .box2 img {19         position: absolute;20       }21 22       .box3 img,.box4 img {23         position: absolute;24         left:0;25         bottom:0;26       }27 28       .box5 img {29         position: absolute;30         left: -30px;31         bottom: -50px;32       }33 34       .block {35         position :relative;36         height: 200px;37       }38     </style>39   </head>40   <body>41     <div class="container">42       <div class="box1">43         <p>元素绝对定位时,会完全脱离文档流,并相对于其包含块定位。绝对定位的包含块,是其最近的已定位的祖先元素。</p>44         <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />45         <ul>46           <li>如果这个祖先元素是块级元素,包含块则为该祖先元素的内边距边界,即边框。</li>47           <li>如果这个祖先元素是行内元素,包含块则为该祖先元素的内容边界,即内容区。</li>48           <li>如果没有已定位的祖先元素,元素的包含块定义为初始包含块(一个视窗大小的矩形)。</li>   49         </ul>50       </div><!--关闭box1-->51     </div><!--关闭container-->52     <div class="container">53       <div class="box2">54       <p>不管有没有已经定位的祖先元素,只要没有偏移量,绝对定位之后,原地不动,脱离文档流。</p>55       <p>下面这个已经绝对定位的图像原地没动,但是已经脱离了文档流。</p>56       <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />57       </div><!--关闭box2-->58     </div><!--关闭container-->59     <div class="container">60       <div class="box3">61         <p>没有已经定位的祖先元素,有偏移量,绝对定位之后,以初始包含块(一个视窗大小的矩形)为基准进行偏移。</p>62         <p>当偏移量为left:0; buttom:0时,图像水平偏移到了初始包含块左下角左下角(打开网页最开始的那一个视窗的左下角)。63         <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />64       </div><!--关闭box3-->65     </div><!--关闭container-->66     <div class="container block">67       <div class="box4">68         <p>有已经定位的祖先元素,有偏移量,绝对定位之后,以已经定位的祖先元素为基准进行偏移。69         此处已经定位的祖先元素为这个图像的容器div元素,偏移量为left:0; bottom:0时,图像到了这个容器的左下角(以边框为界)。</p>70         <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />71       </div><!--关闭box4-->72     </div><!--关闭container-->73     <div class="container block">74       <div class="box5">75         <p>有已经定位的祖先元素,有偏移量,绝对定位之后,以已经定位的祖先元素为基准进行偏移。76         此处已经定位的祖先元素为这个图像的容器div元素,偏移量为left:-30px; bottom:-50px时,图像到了这个容器之外(以边框为界)。</p>77         <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />78       </div><!--关闭box5-->79     </div><!--关闭container-->80   </body>  81 </html>

View Code

 

 三、用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     </style>32   </head>33   <body>34     <div class="box1">35       <span>卡哇伊</span>36       <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />37       <span>萌萌哒</span>38     </div>39     <div class="box2">40       <span>卡哇伊</span>41       <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />42       <span>萌萌哒</span>43       </div>  44     <div class="box3">45       <span>卡哇伊</span>46       <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />47       <span class="meng">萌萌哒</span>48     </div>  49     <div class="box4">50       <p>第一幅图,最开始的样子。</p>51       <p>第二幅图,两个标签绝对定位,但是不指定任何偏移量。</p>52       <p>第三幅图,用margin负值调整“萌萌哒”的位置,完成。</p>53     </div>    54   </body>55 </html>

View Code

 放弃偏移属性而改用margin来调整绝对定位元素,其原理在于:

绝对定位的元素,在不设置偏移量的时候,它虽然完全脱离了文档流,但它还在原来的位置。

利用偏移属性进行精确定位,其具体位置是取决于绝对定位元素的包含块,不同的包含块将会有完全不一样的定位结果。

而利用margin进行精确定位,不依赖于任何其他东西,更加可控。