CSS position:absolute浅析

原创: 2016-07-21 14:53:00 837浏览

一、绝对定位的特征

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

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

请看下面代码：

 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: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>
50         div>
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>
57         div>
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>
64         div>
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>
71         div>
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>
78         div>
79     body>    
80 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 
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>

View Code

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

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

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

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

在写这篇博文的时候，absolute让我给relative带话，它说：“relative，你给我滚好吗，我这辈子都不想看到你！”

预知后事如何，请移步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             }