CSSposition:absolute全面了解分析

來源：懂視網責編：小采時間：2020-11-27 18:52:54

CSSposition:absolute全面了解分析

CSSposition:absolute全面了解分析:一、絕對定位的特征絕對定位有著與浮動一樣的特性，即包裹性和破壞性。就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。請看下面代碼：<!DOCTYPE html> <html> <head> &

推薦度：

點擊下載本文 文檔為doc格式

導讀CSSposition:absolute全面了解分析:一、絕對定位的特征絕對定位有著與浮動一樣的特性，即包裹性和破壞性。就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。請看下面代碼：<!DOCTYPE html> <html> <head> &

一、絕對定位的特征

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

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

請看下面代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>絕對定位的特征</title>
 <style>
 .box1,.box2,.box3 { 
 background-color: orange; 
 margin-bottom: 30px; 
 } 

 .absolute { 
 position: absolute; 
 } 

 .wraper { 
 display:inline-block; 
 margin-left: 300px; 
 } 

 .float { 
 float: left; 
 } 

 .box3 { 
 position: absolute; 
 } 
 </style>
 </head>
 <body>
 <p class="box1">
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
 <p>這是普通流中的兩幅圖像。</p>
 </p>
 <p class="box2">
 <img class="absolute" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />

 <p class="wraper">
 <img class="float" src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
 </p>
 <p>左圖，將第一幅圖像絕對定位，其完全脫離文檔流，并且覆蓋在第二幅圖像之上；由此看出，絕對定位的破壞性不僅讓元素沒有了高度，甚至沒有了寬度。</p>
 <p>右圖，將第一幅圖像左浮動，其雖然脫離了文檔流，但是并沒有覆蓋在其他元素之上；浮動的破壞性僅僅破壞了元素的高度，而保留了元素的寬度。</p>
 </p>
 <p class="box3">
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 <img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
 <p>將容器絕對定位，體現其包裹性。</p>
 </p>
 </body>
</html>

二、絕對定位的一般規則：

元素絕對定位時，會完全脫離文檔流，并相對于其包含塊定位。

絕對定位的包含塊，是其最近的已定位的祖先元素。

如果這個祖先元素是塊級元素，包含塊則為該祖先元素的內邊距邊界，即邊框。

如果這個祖先元素是行內元素，包含塊則為該祖先元素的內容邊界，即內容區。

如果沒有已定位的祖先元素，元素的包含塊定義為初始包含塊。

偏移屬性：top、right、bottom、left。

如果絕對定位的元素沒有設置偏移屬性，雖然脫離文檔流，但是它的位置是原地不動的。

偏移屬性可以為負值，將元素定位到包含塊之外。

代碼在這里：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>絕對定位的一般規則</title>
 <style>
 body { 
 background-color: #ccc; 
 } 
 .container { 
 width:500px; 
 background-color: orange; 
 margin:20px auto 50px auto; 
 padding:20px; 
 border:2px solid red; 
 } 

 .box2 img,.box3 img, 
 .box4 img,.box5 img { 
 position: absolute; 
 } 

 .box3 img,.box4 img { 
 left:0; 
 bottom:0; 
 } 

 .box5 img { 
 left: -30px; 
 bottom: -50px; 
 } 

 .block { 
 position :relative; 
 height: 200px; 
 } 
 </style>
 </head>
 <body>
 <p class="container">
 <p class="box1">
 <p>元素絕對定位時，會完全脫離文檔流，并相對于其包含塊定位。絕對定位的包含塊，是其最近的已定位的祖先元素。</p>
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 <ul>
 <li>如果這個祖先元素是塊級元素，包含塊則為該祖先元素的內邊距邊界，即邊框。</li>
 <li>如果這個祖先元素是行內元素，包含塊則為該祖先元素的內容邊界，即內容區。</li>
 <li>如果沒有已定位的祖先元素，元素的包含塊定義為初始包含塊（一個視窗大小的矩形）。</li>
 </ul>
 </p><!--關閉box1-->
 </p><!--關閉container-->
 <p class="container">
 <p class="box2">
 <p>不管有沒有已經定位的祖先元素，只要沒有偏移量，絕對定位之后，原地不動，脫離文檔流。</p>
 <p>下面這個已經絕對定位的圖像原地沒動，但是已經脫離了文檔流。</p>
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 </p><!--關閉box2-->
 </p><!--關閉container-->
 <p class="container">
 <p class="box3">
 <p>沒有已經定位的祖先元素，有偏移量，絕對定位之后，以初始包含塊（一個視窗大小的矩形）為基準進行偏移。</p>
 <p>當偏移量為left:0; buttom:0時，圖像水平偏移到了初始包含塊左下角（打開網頁最開始的那一個視窗的左下角）。</p>
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 </p><!--關閉box3-->
 </p><!--關閉container-->
 <p class="container block">
 <p class="box4">
 <p>有已經定位的祖先元素，有偏移量，絕對定位之后，以已經定位的祖先元素為基準進行偏移。</p>
 <p>此處已經定位的祖先元素為這個圖像的容器p元素，偏移量為left:0; bottom:0時，圖像到了這個容器的左下角（以邊框為界）。</p>
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 </p><!--關閉box4-->
 </p><!--關閉container-->
 <p class="container block">
 <p class="box5">
 <p>有已經定位的祖先元素，有偏移量，絕對定位之后，以已經定位的祖先元素為基準進行偏移。</p>
 <p>此處已經定位的祖先元素為這個圖像的容器p元素，偏移量為left:-30px; bottom:-50px時，圖像到了這個容器之外（以邊框為界）。</p>
 <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/72f082025aafa40fa38bfc55a964034f79f019ec.jpg" alt="A picture" style="width:175px;height:100px" />
 </p><!--關閉box5-->
 </p><!--關閉container-->
 </body>
</html>

三、用margin調整絕對定位元素的位置

絕對定位的元素，除了可以使用top、right、bottom、left進行偏移之外，還能夠通過margin值進行精確定位，而且自適應性更好。

示例：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>用margin調整絕對定位元素的位置</title>
 <style>
 .box1,.box2,.box3 { 
 display: inline-block; 
 margin-right: 150px; 
 border:1px solid blue; 
 } 

 span { 
 background-color: red; 
 } 

 .box2 span,.box3 span { 
 position: absolute; 
 } 

 .meng { 
 margin-left: -3em; 
 } 

 .box4 { 
 border:1px solid red; 
 width: 500px; 
 margin: 50px auto 0 auto; 
 padding:20px; 
 } 

 li { 
 margin-bottom: 20px; 
 } 
 </style>
 </head>
 <body>
 <p class="box1">
 <span>卡哇伊</span>
 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
 <span>萌萌噠</span>
 </p>
 <p class="box2">
 <span>卡哇伊</span>
 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
 <span>萌萌噠</span>
 </p>
 <p class="box3">
 <span>卡哇伊</span>
 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" style="width:200px;height:300px" />
 <span class="meng">萌萌噠</span>
 </p>
 <p class="box4">
 <ol>
 <li>第一幅圖，最開始的樣子。</li>
 <li>第二幅圖，兩個標簽絕對定位，但是不指定任何偏移量。</li>
 <li>第三幅圖，用margin負值調整“萌萌噠”的位置，完成。</li>
 </ol>
 </p>
 </body>
</html>

放棄偏移屬性而改用margin來調整絕對定位元素，其原理在于：

絕對定位的元素，在不設置偏移量的時候，它雖然完全脫離了文檔流，但它還在原來的位置。

利用偏移屬性進行精確定位，其具體位置是取決于絕對定位元素的包含塊，不同的包含塊將會有完全不一樣的定位結果。

而利用margin進行精確定位，不依賴于任何其他東西，更加可控。

四、絕對定位與整體布局

如何用絕對定位來對頁面進行整體布局？

簡單粗暴，不學就浪費啦！！！

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>絕對定位與整體頁面布局</title>
 <style>
 * { 
 margin: 0; 
 }/*重置所有margin為0，這一步極其重要，否則布局必亂。*/ 

 html,body,.page { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 } 

 .page { 
 position: absolute; 
 top: 0; 
 right: 0; 
 bottom: 0; 
 left: 0; 
 background-color: #ccc; 
 } 

 .header { 
 position: absolute; 
 height: 50px; 
 left: 0; 
 right: 0; 
 background-color: purple; 
 padding: 0 5px; 
 z-index: 1; 
 } 

 .header>h1 { 
 line-height: 50px; 
 text-align: center; 
 } 

 .aside { 
 position: absolute; 
 top: 50px; 
 bottom: 50px; 
 left: 0; 
 width: 100px; 
 background-color: orange; 
 } 

 .footer { 
 position: absolute; 
 right: 0; 
 bottom: 0; 
 left: 0; 
 height: 50px; 
 background-color: purple; 
 } 

 .footer>h1 { 
 text-align: center; 
 line-height: 50px; 
 } 

 .content { 
 position: absolute; 
 top: 50px; 
 right: 0; 
 bottom: 50px; 
 left: 100px; 
 background-color: cyan; 
 overflow: auto; 
 } 

 .content h1 { 
 margin-top: 100px; 
 margin-left: 50px; 
 } 

 .content li { 
 margin-left: 100px; 
 margin-top: 80px; 
 font-size: 24px; 
 line-height: 1.5; 
 } 

 ol { 
 margin-bottom: 80px; 
 } 
 </style>
 </head>
 <body>
 <p class="page">
 <p class="header">
 <h1>Header</h1>
 </p>
 <p class="aside">
 <h1>Aside</h1>
 </p>
 <p class="content">
 <h1>實現原理</h1>
 <ol>
 <li>創建一個p.page，絕對定位，鋪滿全屏。</li>
 <li>創建一個p.header，絕對定位，設定高度。</li>
 <li>創建一個p.aside，絕對定位，設定寬度。</li>
 <li>創建一個p.footer，絕對定位，設定高度。</li>
 <li>創建一個p.content，絕對定位，根據周圍p的寬高設定它的寬高；<br />
 以p.content元素取代原body元素，所有的頁面內容都放在這里面。</li>
 </ol>
 </p>
 <p class="footer">
 <h1>Footer</h1>
 </p>
 </p>
 </body>
</html>

以上這篇CSS position:absolute全面了解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多CSSposition:absolute全面了解分析相關文章請關注PHP中文網！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com