絕對定位有著與浮動一樣的特性，即包裹性和破壞性。
就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。
請看下面代碼：
<!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>二、絕對定位的一般規(guī)則：
元素絕對定位時，會完全脫離文檔流，并相對于其包含塊定位。
絕對定位的包含塊，是其最近的已定位的祖先元素。
如果這個祖先元素是塊級元素，包含塊則為該祖先元素的內邊距邊界，即邊框。
如果這個祖先元素是行內元素，包含塊則為該祖先元素的內容邊界，即內容區(qū)。
如果沒有已定位的祖先元素，元素的包含塊定義為初始包含塊。
偏移屬性：top、right、bottom、left。
如果絕對定位的元素沒有設置偏移屬性，雖然脫離文檔流，但是它的位置是原地不動的。
偏移屬性可以為負值，將元素定位到包含塊之外。
代碼在這里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>絕對定位的一般規(guī)則</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>如果這個祖先元素是行內元素，包含塊則為該祖先元素的內容邊界，即內容區(qū)。</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>創(chuàng)建一個p.page，絕對定位，鋪滿全屏。</li>
<li>創(chuàng)建一個p.header，絕對定位，設定高度。</li>
<li>創(chuàng)建一個p.aside，絕對定位，設定寬度。</li>
<li>創(chuàng)建一個p.footer，絕對定位，設定高度。</li>
<li>創(chuàng)建一個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
Copyright ? 2019-2025 www.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
