下面小編就為大家帶來一篇對絕對定位的全面理解。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>有关绝对定位的理解</title> </head> <style type="text/css">
/* 1.未被設定定位之前是大盒子包裹著小盒子，符合標準文檔流，如圖片1所示
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
width: 200px;
height: 200px;
background:blue;
}*/圖片1
#/*2. 絕對定位使元素的位置與文檔流程無關，因此不佔據空間。
這一點與相對定位不同，相對定位實際上被視為普通流定位模型的一部分，
因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素，
如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
如圖2所示
.box1{width: 500px;height: 500px;background:red;position: relative;}.box2{width: 200px;height: 200px;background:blue;position:absolute;top:150px;left:150px;
}*/圖片2
/*3、box2沒有寬高且在不設定定位的情況下,box2會被box1包裹,符合標準文檔流，並且在佔據文檔的位置,
如圖片3.
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
background:blue;
}*/
圖片3
/*4、box2沒有寬高在設定定位的情況下,box2會脫離文檔流,並且位置在指定相對於相對定位元素的位置,寬會失效,就是說寬高都由內容自動撐開的.如圖片4.如需要寬高需另設定*/
.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
background:blue;
position:absolute;
top:150px;
left:150px;
}
圖片4
</style> <body> <p class="box1"> <p class="box2">这是一个小盒子</p> </p> </body> </html>以上這篇關於絕對定位的全面理解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。 ######更多關於絕對定位的全面理解分析相關文章請關注PHP中文網！ ###
什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。
我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架
CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3 Linux新版
SublimeText3 Linux最新版
記事本++7.3.1
好用且免費的程式碼編輯器
