溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關CSS中position:absolute的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
一、絕對定位的特征
絕對定位有著與浮動一樣的特性，即包裹性和破壞性。
就破壞性而言，浮動僅僅破壞了元素的高度，保留了元素的寬度；而絕對定位的元素高度和寬度都沒有了。
請看下面代碼：
<!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>
<div class="box1">
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />
<p>這是普通流中的兩幅圖像。</p>
</div>
<div class="box2">
<img class="absolute" src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />
<div class="wraper">
<img class="float" src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />
</div>
<p>左圖，將第一幅圖像絕對定位，其完全脫離文檔流，并且覆蓋在第二幅圖像之上；由此看出，絕對定位的破壞性不僅讓元素沒有了高度，甚至沒有了寬度。</p>
<p>右圖，將第一幅圖像左浮動，其雖然脫離了文檔流，但是并沒有覆蓋在其他元素之上；浮動的破壞性僅僅破壞了元素的高度，而保留了元素的寬度。</p>
</div>
<div class="box3">
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
<img src="https://cache.yisu.com/upload/information/20210311/295/9685.jpg" alt="A picture" style="width:240px;height:180px" />
<p>將容器絕對定位，體現其包裹性。</p>
</div>
</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>
<div class="container">
<div class="box1">
<p>元素絕對定位時，會完全脫離文檔流，并相對于其包含塊定位。絕對定位的包含塊，是其最近的已定位的祖先元素。</p>
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
<ul>
<li>如果這個祖先元素是塊級元素，包含塊則為該祖先元素的內邊距邊界，即邊框。</li>
<li>如果這個祖先元素是行內元素，包含塊則為該祖先元素的內容邊界，即內容區。</li>
<li>如果沒有已定位的祖先元素，元素的包含塊定義為初始包含塊（一個視窗大小的矩形）。</li>
</ul>
</div><!--關閉box1-->
</div><!--關閉container-->
<div class="container">
<div class="box2">
<p>不管有沒有已經定位的祖先元素，只要沒有偏移量，絕對定位之后，原地不動，脫離文檔流。</p>
<p>下面這個已經絕對定位的圖像原地沒動，但是已經脫離了文檔流。</p>
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--關閉box2-->
</div><!--關閉container-->
<div class="container">
<div class="box3">
<p>沒有已經定位的祖先元素，有偏移量，絕對定位之后，以初始包含塊（一個視窗大小的矩形）為基準進行偏移。</p>
<p>當偏移量為left:0; buttom:0時，圖像水平偏移到了初始包含塊左下角（打開網頁最開始的那一個視窗的左下角）。</p>
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--關閉box3-->
</div><!--關閉container-->
<div class="container block">
<div class="box4">
<p>有已經定位的祖先元素，有偏移量，絕對定位之后，以已經定位的祖先元素為基準進行偏移。</p>
<p>此處已經定位的祖先元素為這個圖像的容器div元素，偏移量為left:0; bottom:0時，圖像到了這個容器的左下角（以邊框為界）。</p>
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--關閉box4-->
</div><!--關閉container-->
<div class="container block">
<div class="box5">
<p>有已經定位的祖先元素，有偏移量，絕對定位之后，以已經定位的祖先元素為基準進行偏移。</p>
<p>此處已經定位的祖先元素為這個圖像的容器div元素，偏移量為left:-30px; bottom:-50px時，圖像到了這個容器之外（以邊框為界）。</p>
<img src="https://cache.yisu.com/upload/information/20210311/295/9684.jpg" alt="A picture" style="width:175px;height:100px" />
</div><!--關閉box5-->
</div><!--關閉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>
<div class="box1">
<span>卡哇伊</span>
<img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />
<span>萌萌噠</span>
</div>
<div class="box2">
<span>卡哇伊</span>
<img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />
<span>萌萌噠</span>
</div>
<div class="box3">
<span>卡哇伊</span>
<img src="https://cache.yisu.com/upload/information/20210311/295/9686.jpg" style="width:200px;height:300px" />
<span class="meng">萌萌噠</span>
</div>
<div class="box4">
<ol>
<li>第一幅圖，最開始的樣子。</li>
<li>第二幅圖，兩個標簽絕對定位，但是不指定任何偏移量。</li>
<li>第三幅圖，用margin負值調整“萌萌噠”的位置，完成。</li>
</ol>
</div>
</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>h2 {
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>h2 {
text-align: center;
line-height: 50px;
}
.content {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 100px;
background-color: cyan;
overflow: auto;
}
.content h2 {
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>
<div class="page">
<div class="header">
<h2>Header</h2>
</div>
<div class="aside">
<h2>Aside</h2>
</div>
<div class="content">
<h2>實現原理</h2>
<ol>
<li>創建一個div.page，絕對定位，鋪滿全屏。</li>
<li>創建一個div.header，絕對定位，設定高度。</li>
<li>創建一個div.aside，絕對定位，設定寬度。</li>
<li>創建一個div.footer，絕對定位，設定高度。</li>
<li>創建一個div.content，絕對定位，根據周圍div的寬高設定它的寬高；<br />
以div.content元素取代原body元素，所有的頁面內容都放在這里面。</li>
</ol>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>感謝各位的閱讀！關于“CSS中position:absolute的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
