CSS布局 2 絕對定位和相對定位

2021-08-24 19:09:42 字數 567 閱讀 8279

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來設定上下關係的,一定是子級在上父級在下。

CSS 相對定位和絕對定位

1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是否進行移動,元素仍然佔據原來的空間。因此,移動元素會導致它覆蓋其他框 2.position absolut...

css 絕對定位和相對定位

絕對定位指的是通過規定html元素在水平和垂直方向上的位置來固定元素,基於絕對定位的元素不佔據空間。絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定位的元素沒有已定位的祖先元素做參考值,則相對於整個網頁。例項1 該段落是相對於頁面定位,距離頁面的頂部100畫素,距離左邊...

css絕對定位和相對定位

定位是用來改變自己的位置的,誰要改變就確定原來自己的位置是relative還是absolute 相對定位 相對嘛,要有乙個參照物,但這個參照不是別的,是它自己呢,也就是說沒設相對定位的位置,那你會問了,設沒設都在那個位置為什麼要設呢,因為只有設定了才能使 top,left這些生效,也就是設了才能相對...