圖例詳解網頁製作中的絕對位置和相對定位

來源:互聯網
上載者:User
網頁|詳解

很多朋友問過我absolute與relative怎麼區分,怎麼用?我們都知道absolute是絕對位置,relative是相對定位,但是這個絕對與相對是什麼意思呢?絕對是什麼地方的絕對,相對又是相對於什麼地方而言的呢?那他們又有什麼樣的特性,可以做出什麼樣的效果呢?關於兩者之間又有什麼樣的技巧呢?下面我們就來一一解讀。

Absolute,CSS中的寫法是:position:absolute; 他的意思是絕對位置,他是參照瀏覽器的左上方,配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位,在沒有設定TRBL,預設依據父級的做標原始點為原始點。如果設定TRBL並且父級沒有設定position屬性,那麼當前的absolute則以瀏覽器左上方為原始點進行定位,位置將由TRBL決定。

一般來講,網頁置中的話用Absolute就容易出錯,因為網頁一直是隨著解析度的大小自動適應的,而Absolute則會以瀏覽器的左上方為原始點,不會應為解析度的變化而變化位置。很多人出錯就在於這點上出錯。而網頁居左其特性與Relative很相似,但是還是有本質的區別的。

Relative,CSS中的寫法是:position:relative;  他的意思是絕對相對定位,他是參照父級的原始點為原始點,無父級則以BODY的原始點為原始點,配合TRBL進行定位,當父級內有padding等CSS屬性時,當前級的原始點則參照父級內容區的原始點進行定位。

有時我們還需要依靠z-index來設定容器的上下關係,數值越大越在最上面,數值範圍是自然數。當然有一點要注意,父子關係是無法用z-index來設定上下關係的,一定是子級在上父級在下。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。