?
一、定位的基本概念
?
一般我們定位元素都使用絕對定位，因為絕對定位是最容易掌握的定位方式。但結合其他定位方式，我們可以設計更加靈活的頁面。
?
CSS控制定位的屬性為：Position
?
CSS
中關于定位（
position
）是這樣定義的：
定位（
position
）：
允許用戶精確定義元素框出現的相對位置，可以相對于它通常出現的位置，相對于其上級元素，相對于另一個元素，或者相對于瀏覽器視窗本身。每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
?
他的允許值有三個：static,relative和absolute
?
static為默認屬性。relative為相對定位，absolute為絕對定位。
?
static : ?????? 默認值。無特殊定位，對象遵循HTML定位規則
absolute:??????將對象從文檔流中拖出，使用 left ， right ， top ， bottom?????
???????????????????? 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。
???????????????????? 如果不存? 在這樣的父對象，則依據 body 對象。而其層疊通過?????????
???????????????????? z-index 屬性定義 fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范
relative :????? 對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置
?
?
檢索對象的定位方式。設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經占據了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁 ( margin ) ，但仍有內補丁 ( padding ) 和邊框 ( border ) 。
?
要激活對象的絕對 (absolute) 定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，并且設置此屬性值為 absolute 。否則上述屬性會使用他們的默認值 auto ，這將導致對象遵從正常的 HTML 布局規則，在前一個對象之后立即被呈遞。設置此屬性值為 relative 會保持對象在正常的 HTML 流中，但是它的位置可以根據它的前一個對象進行偏移。在相對 (relative) 定位對象之后的文本或對象占有他們自己的空間而不會覆蓋被定位對象的自然空間。與此不同的，在絕對 (absolute) 定位對象之后的文本或對象在被定位對象被拖離正常文檔流之前會占有它的自然空間。放置絕對 (absolute) 定位對象在可視區域之外會導致滾動條出現。而放置相對 (relative) 定位對象在可視區域之外，滾動條不會出現。內容的尺寸會根據布局確定對象的尺寸。例如，設置一個 div 對象的 height 和 position 屬性，則 div 對象的內容將決定它的寬度 ( width ) 。此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。對應的腳本特性為 position 。
?
?
二、各種定位區別
?
1. 相對定位
相對定位是一個非常容易理解的概念，如果對一個元素進行相對定位，它將在他所在的位置上，然后可以通過設置垂直和水平的位置，讓這個元素‘相對于’起點進行移動，如果將 top 設置為 20px, 那么框就會出現在原位置頂部下面 20px 的地方，如果將 left 設置為 20px 那么框就會向右移動 20px
?
#mybox{ Position:relative; Top:20px; Left:20px; }
?
?
如下圖：
?
?
?
?
使用相對定位時，無論是否進行移動，元素仍然占據原來的空間，因此移動元素會導致它覆蓋其他框。
?
2．絕對定位
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。與之相反，絕對定位使元素的位置與文檔流無關，因此不占據空間。普通文檔流中其他元素的布局就像絕對定位的元素不存在時一樣。
?
把相對定位中的代碼改成absolute
則會變成這樣：
?
?
?
?
?
絕對元素的位置相對于最近已定位的祖先元素。如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。根據用戶代理的不同，最初的包含塊。根據代理的不同可能是畫布或 HTML 。
與相對定位的框一樣，絕對定位的框可以從它的包含塊向上，下左，右移動。這提供了很大的靈活性。可以直接將元素定位在頁面上的任何位置。
?
?
因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素，可以通過設置 z-index 屬性來控制這些框的堆放次序。 Z-index 值越高，框在堆中的位置就越高。
?
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
