CSS position:absolute淺析

本文轉載自查看原文 2016-07-19 22:40 1634 CSS

一、絕對定位的特征

絕對定位有着與浮動一樣的特性，即包裹性和破壞性。

就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。

請看下面代碼：

 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><!--關閉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>

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，你給我滾好嗎，我這輩子都不想看到你！”

預知后事如何，請移步absolute與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             }
 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>
 90     </head>
 91     <body>
 92         <div class="page">
 93             <div class="header">
 94                 <h1>Header</h1>
 95             </div>
 96             <div class="aside">
 97                 <h1>Aside</h1>
 98             </div>
 99             <div class="content">
100                 <h1>實現原理</h1>
101                 <ol>
102                     <li>創建一個div.page，絕對定位，鋪滿全屏。</li>
103                     <li>創建一個div.header，絕對定位，設定高度。</li>
104                     <li>創建一個div.aside，絕對定位，設定寬度。</li>
105                     <li>創建一個div.footer，絕對定位，設定高度。</li>
106                     <li>創建一個div.content，絕對定位，根據周圍div的寬高設定它的寬高；<br />
107                     以div.content元素取代原body元素，所有的頁面內容都放在這里面。</li>
108                 </ol>
109             </div>
110             <div class="footer">
111                 <h1>Footer</h1>
112             </div>
113         </div>
114     </body>
115 </html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS的position之absolute、fixed和relative區別 css樣式中position:absolute和position:relative水平居中 CSS 子絕(position：absolute;)父相(position：relative) CSS中position屬性( absolute | relative | static | fixed )詳解 position:absolute和width的關系 CSS 中position:absolute的定位到底是相當於body，還是父級元素的問題【css樣式】當子元素設置屬性為position：absolute，父元素不能自動撐開 position屬性absolute與relative 詳解 Html中的position：absolute的意思淺析CSS——元素重疊及position定位的z-index順序