CSS之定位,相對定位,絕對定位,固定定位

2021-08-02 14:31:52 字數 1605 閱讀 3476

1、position

屬性可以控制web瀏覽器如何以及在何處顯示特定的元素。

2、可以使用position屬性把乙個元素放置到網頁中的任何位置。

可選值:

– static:預設值,元素沒有開啟定位

– relative:開啟相對定位

– absolute:開啟絕對定位 –

fixed:開啟固定定位

3、相對定位

①每個元素在頁面的文件流中都有乙個自然位置。相對於這個位置對元素

進行移動就稱為

相對定位

。周圍的元素完全不受此影響。

②當開啟了相對定位以後,可以使用

top、 right、bottom、 left

四個屬性對元素進行定位。

----left:元素相對於其定位位置的左偏移量。

left:100px,相對與原來位置向右偏移100px

----right:元素相對於其定位位置的右偏移量

----top:

元素相對於其定位位置的上邊偏移量

----bottom:

元素相對於其定位位置的下邊偏移量

③相對定位的特點

----如果不設定元素的偏移量,元素位置不會發生改變。

----相對定位是相對與元素在文件流中原來的位置進行定位。

----相對定位不會使元素脫離文字流。元素在文字流中的位置不會改變。

----相對定位不會改變元素原來的特性。塊元素還是塊元素,內聯還是內聯

----相對定位會使元素的層級提公升,使元素可以覆蓋文字流中的元素。

4、絕對定位

①絕對定位

指使元素相對於html元素或離他最近的祖先定位元素進行定位。

②當將position屬性設定為

absolute

時,則開啟了元素的絕對定位。

③當開啟了絕對定位以後,可以使用

top、 right、bottom、 left

四個屬性對元素進行定位。

④絕對定位的特點:

----絕對定位會使元素完全脫離文字流。

----絕對定位的塊元素的寬度會被其內容撐開。

----絕對定位會使行內元素變成塊元素。

----絕對定位是相對於離它最近的開啟了定位的祖先元素。

如果所有的祖先都沒有開啟定位,則會相對於瀏覽器視窗進行定位。

----一般使用絕對定位時會同時為其父元素指定乙個相對定位,

以確保元素可以相對于父元素進行定位。

----絕對定位會使元素的層級提公升

。5、固定定位

①固定定位的元素會被鎖定在螢幕的某個位置上,當

訪問者滾動網頁時,固定元素會在螢幕上保持不動

②當將position屬性設定為

fixed

時,則開啟了元素的

固定定位。

③當開啟了固定定位以後,可以使用

top、 right、

bottom、 left

四個屬性對元素進行定位。

④固定定位也是一種絕對定位,

固定定位的其他特性和絕對定位類似。

不同:固定定位永遠相對與瀏覽器定位。

會固定在瀏覽器視窗某個位置,不會隨滾動條滾動。

ie6不支援固定定位。

CSS定位,相對定位,絕對定位

position relative 表示相對定位。對乙個元素進行相對定位,即指通過設定垂直或水平位置,讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px,那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素,那麼會在元素左邊建立30畫素的空間,也就是將元素向右移動,如...

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後,可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...