<!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>
以上這篇有關絕對位置的全面理解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
