css中定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。下面開始介紹如何使用css position屬性實現定位效果。
一：靜態定位（static）
元素按照其在 HTML 中的位置順序決定排布的過程，預設定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。本元素需要設定position為static。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com-position元素(靜態定位)</title><style>.box{width: 300px;overflow: hidden;padding: 10px;border: 1px solid #000;margin: 10px auto;}.static {position: static;border: 3px solid #007AFF;}</style></head><body><div class="box"><h2>position: static;</h2><p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p><div class="static">該元素使用了 position: static;</div></div></body></html>
下面是：
二：相對定位（relative）
相對定位被看作普通流定位模型的一部分，定位元素的位置相對於它在普通流中的位置進行移動top,left,bottom,right都可以有值。使用相對定位的元素不管它是否進行移動，元素仍要佔據它原來的頁面空間，可以設定z-index。使本元素相對於文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近使用者的視線。相對定位最大的作用是為了實現某個元素相對於本元素的左上方絕對位置，本元素需要設定position為relative。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com-position元素(相對定位)</title><style>.box{width: 300px;overflow: hidden;padding: 10px;border: 1px solid #000;margin: 10px auto;}.box1{ background-color: red; width:100px; height:100px; } .box2{ background-color: yellow; width:100px; height:100px; position: relative; left: 20px; } .box3{ background-color: blue; width:100px; height:100px; position: relative; right: 20px; }</style></head><body><div class="box"> <h2>position: relative;</h2><div class="box1">正常位置的盒子</div><div class="box2">相對於其正常位置向左移動的盒子</div><div class="box3">相對於其正常位置向右移動的盒子</div></div></body></html>
下面是：
相對定位元素經常被用來作為絕對位置元素的容器塊。
三：絕對位置（absolute）
將被賦予絕對位置的元素從它在普通流中的位置中拖出，使用left、right、top、bottom等屬性相對於其最接近的一個最有定位設定的父級元素進行絕對位置，如果元素的父級沒有設定定位屬性，則依據 body 元素左上方作為參考進行定位。絕對位置元素可層疊，層疊順序可通過 z-index 屬性控制，z-index值為無單位的整數，大的在上面，可以有負值。
絕對位置的定位方法：如果它的父元素設定了除static之外的定位，比如position:relative或position:absolute及position:fixed，那麼它就會相對於它的父元素來定位，位置通過left , top ,right ,bottom屬性來規定，如果它的父元素沒有設定定位，那麼就得看它父元素的父元素是否有設定定位，如果還是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設定了除static定位之外的定位的第一個祖先元素，如果所有的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文檔body來定位。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com-position元素(絕對位置)</title><style>.box{width: 300px;overflow: hidden;padding: 10px;border: 1px solid #000;}.div1 { width: 150px; height: 150px; background: yellow;}.div2 { width: 150px; height: 150px; background: red; top: 150px; left: 100px; position: absolute;}</style></head><body><div class="box"><h2>position: absolute;</h2><div class="div1">父元素 <div class="div2">子項目</div></div></div></body></html>
下面是：
四、固定定位（fixed）
固定定位與絕對位置類似，但它是相對於瀏覽器視窗定位，並且不會隨著捲軸進行滾動。
固定定位的最常見的一種用途是在頁面中建立一個固定頭部、固定腳部或者固定側邊欄，不需使用margin、border、padding。本元素需要設定position為fixed。
那麼以上就是關於css使用position屬性達到定位效果的具體用法介紹，具有一定的參考價值，希望對有需要的朋友有所協助！更多請關注php中文網其它相關文章！
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
