css定位有哪幾種方式?

2021-10-03 03:14:19 字數 1836 閱讀 1632

相信很多的初學者和我一樣在剛接觸有關浮動和定位都有些搞不清楚,在這裡我將介紹一下我所理解的有關

css的定位方式。

在css中浮動主要是解決一些有關布局的左右排列問題,其實定位的作用和浮動的作用差不多,不過區

別是定位用來解決疊加排列的問題。

在用定位時,你需要寫position屬性,position 屬性規定元素的定位型別。下面來逐一介紹

position屬性後面所跟的值。

static

為預設值,意味著你當前的標籤不會發生定位,且元素會正常出現在文件中。具體寫法為:

position

: static;

relative : 相對定位

relative相對定位它的特點是它不會是元素脫離文件流,且原空間會被保留,最主要的一點是它不會影響其它元素的布局。

relative後面一般跟top 、bottom 、left 、right四個表示偏移方向的值,要注意的一點是相對定位是相對於自身的位置進行偏移的。但當你沒有定義相對偏移的量時它對元素自身沒有任何影響。具體的寫法為:

3. absolute : 絕對定位

absolute絕對定位的特點是它會使元素完全脫離文件流,這樣你就可以用來布局例如兩個塊元素疊加在一起的問題。它還有兩個特別重要的特點:1.它會使內聯元素支援寬高屬性;2.它也會使塊元素的寬度根據內容決定。

它表示偏移方向時其寫法和相對定位的寫法一樣,但是它會相對於 static 定位以外的第乙個父元素進行定位。 具體的寫法也和相對定位一樣:

"box1">

"box2">

"box3">

4. fixed : 固定定位

它的特點和絕對定位的特點大部分一樣:

使元素完全脫離文件流

使內聯元素支援寬高

使塊元素預設寬根據內容決定

但是需要注意的是它是相對於整個瀏覽器視窗進行偏移,不受瀏覽器滾動條的影響而且它不會不會受到父元素的影響。具體寫法:

5. sticky : 黏性定位

在沒有到達指定位置的時候,是沒有定位效果的,到達了指定位置,就變成了固定模式。其具體寫法為:

這個的意義是當元素的位置到達 top為100px是這個元素會固定在這個地方。

在說到定位的時候必需要介紹乙個重要的元素: z-index定位層級

它的預設層級為0,用來解決巢狀時候的層級問題,當誰的z-index的值大時會將其顯示在最上面。比較的時候,會先跟同級別的先比較。列如:

"box1">

"box2">逆戰班

"box3">逆戰班

這樣它會將紅色的塊定位在藍色的塊之上。

另外需要注意一定的是當布局的時候一般使用父相子絕的用法。特別注意的是定位可以解決margin傳遞問題。

注:因為是新手望各位大佬可以指出錯誤,也祝各位身體健康,萬事如意。

css定位哪幾種方式

1.position static 預設值 2.position absolute 絕對定位 3.position relative 相對定位 4.position fixed 固定定位 5.position sticky 粘性定位 特徵position static 預設值,設定座標無效 posi...

css外部檔案的引用方式有哪幾種

css外部檔案的引用可分為兩bvwwk種,一種是通過在裡面的link來引用,另外一種是直接www.cppcns.com通過imp程式設計客棧ort來引用。例子如下所示 第一種引用 複製 如下 bvwwk 第二種引用 複製 如下 import url css mycss.css 這種引www.cppc...

JS有哪幾種傳參方式?

我們今天講的傳參是指頁面之間的資料傳遞。傳統的前端開發中,頁面之間是少有引數互動的,甚至沒有,而在如今的前端環境下,乙個稍微正式點的專案都不可能少了頁面間傳參,頁面的跨越 伺服器後台進行資料請求等,都需要乙個或多個傳參的方法。那麼引數在不同的頁面間進行傳遞,乙個頁面的引數被另一頁面使用,如何才能做到...