這篇文章主要介紹“css中position屬性的用法介紹”，在日常操作中，相信很多人在css中position屬性的用法介紹問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css中position屬性的用法介紹”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)公司是專業(yè)的陽高網(wǎng)站建設公司，陽高接單;提供做網(wǎng)站、網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行陽高網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

CSS2.0的解釋：

設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占據(jù)了給定的位置，他們之間不會相互影響，而會在同一位置層疊。此時對象不具有外補丁( margin )，但仍有內(nèi)補丁( padding )和邊框( border )。
要激活對象的絕對(absolute)定位，必須指定 left ， right ， top ， bottom 屬性中的至少一個，并且設置此屬性值為 absolute 。否則上述屬性會使用他們的默認值 auto ，這將導致對象遵從正常的HTML布局規(guī)則，在前一個對象之后立即被呈遞。

TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）只有當設定了position屬性才有效。
當設定position:absolute
如果父級（無限）沒有設定position屬性，那么當前的absolute則結合TRBL屬性以瀏覽器左上角為原始點進行定位
如果父級（無限）設定position屬性，那么當前的absolute則結合TRBL屬性以父級（最近）的左上角為原始點進行定位。

當設定position: relative
則參照父級（最近）的內(nèi)容區(qū)的左上角為原始點結合TRBL屬性進行定位（或者說相對于被定位元素在父級內(nèi)容區(qū)中的上一個元素進行偏移），無父級則以BODY的左上角為原始點。相對定位是不能層疊的。在使用相對定位時，無論元素是否進行移動，元素依然占據(jù)原來的空間。因此，移動元素會導致它覆蓋其他框。

一般來講，網(wǎng)頁居中的話用Absolute就容易出錯，因為網(wǎng)頁一直是隨著分辨率的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為分辨率的變化而變化位置。有時還需要依靠z-index來設定容器的上下關系，數(shù)值越大越在最上面，數(shù)值范圍是自然數(shù)。當然有一點要注意，父子關系是無法用z-index來設定上下關系的，一定是子級在上父級在下。

設置此屬性值為 relative 會保持對象在正常的HTML流中，但是它的位置可以根據(jù)它的前一個對象進行偏移。在相對(relative)定位對象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會覆蓋被定位對象的自然空間。與此不同的，在絕對(absolute)定位對象之后的文本或?qū)ο笤诒欢ㄎ粚ο蟊煌想x正常文檔流之前會占有它的自然空間。放置絕對(absolute)定位對象在可視區(qū)域之外會導致滾動條出現(xiàn)。而放置相對(relative)定位對象在可視區(qū)域之外，滾動條不會出現(xiàn)。其實對于定位的主要問題是要記住每個定位的意義。相對定位是“相對于“元素在文檔流中初始位置的，而絕對定位是”相對于“最近的已經(jīng)定位的祖先元素。

以下是補充：

雖然有知道css的絕對定位（absolute）、相對定位（relative），但卻從未自己動手寫過相關的效果！
忙活了一大半天，也算是完成了！也把這兩個屬性搞明白了一些！

總結如下：

先看下面這一個層結構

代碼如下: