position定位有哪幾種？各有什麼特點？

這裡是修真院前端小課堂，每篇分享文從

八個方面深度解析前端知識/技能，本篇分享的是：

【position定位有哪幾種？各有什麼特點？】

【修真院css小課堂】

position定位有哪幾種？各有什麼特點？

開場語：

position定位有哪幾種？各有什麼特點？

（1）背景介紹：

定位分為三種

相對定位

讓元素讓元素相對於自己原來的位置，進行位置調整（可用於盒子的位置微調）。

相對定位不脫標:老家留坑，別人不會把它的位置擠走。

就是說，相對定位的真實位置還在老家，只不過影子出去了，可以到處飄。

絕對定位

定義橫縱座標。原點在父容器的左上角或左下角。

絕對定位脫標，絕對定位的盒子脫離了標準文件流。

絕對定位之後，標籤就不區分所謂的行內元素、塊級元素了，不需要display:block就可以設定寬、高了。

固定定位

是相對瀏覽器視窗進行定位。無論頁面如何滾動，這個盒子顯示的位置不變。

（2）知識剖析：

相對定位

有什麼作用？

相對定位有坑，所以如果需要做一般不用於做「壓蓋」效果（把乙個div放到另乙個div之上）

做絕對定位的參考，子絕父相

絕對定位

乙個絕對定位的元素，如果父輩元素中也出現了已定位

無論是絕對定位、相對定位，還是固定定位）的元素

那麼將以父輩這個元素，為參考點。

子絕父相」有意義：這樣可以保證父親沒有脫標，兒子脫標在父親的範圍裡面移動。

固定定位

頂部導航

我們經常能看到固定在網頁頂端的導航條，可以用固定定位來做

（3）常見問題：

有的時候為什麼會出現透明的情況呢？

（4）解決方案：

z-index屬性：表示誰壓著誰。數值大的壓蓋住數值小的。

有如下特性：

（1）屬性值大的位於上層，屬性值小的位於下層。

（2）z-index值沒有單位，就是乙個正整數。預設的z-index值是0。

（3）如果大家都沒有z-index值，或者z-index值一樣，那麼在html**裡寫在後面，誰就在上面能壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。

（4）只有定位了的元素，才能有z-index值。也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值。而浮動的元素不能用。

（5）編碼實戰：

z-index：1；如果說在運用種，有1和2 的情況，如果父親1比父親2大，那麼，即使兒子1比兒子2小，兒子1也能在最上層。

（6）拓展思考：

讓絕對定位中的盒子居中

我們知道，如果想讓乙個標準流中的盒子居中（水平方向看）

可以將其設定margin: 0 auto屬性。

可如果盒子是絕對定位的，此時已經脫標了，如果還想讓其居中，可以這樣做

left:50%; margin-left:負的寬度的一半

1：生命壹號部落格

1：問題：fixed 定位在 ie7 和 ie8 下需要描述什麼才會支援呢？

回答：1.!doctype 才能支援。

2：問題：2.absolute 定位的元素和其他元素重疊嗎？

回答：2.會重疊的

3：問題：relative在沒有設定寬度的情況下，寬度是多少呢？

回答：3.寬度是整個瀏覽器的寬度。

（9）鳴謝：

感謝王剛師兄，此教程是在他們之前技術分享的基礎上完善而成。

（10）結束語：

position定位有哪幾種？各有什麼特點

這裡是修真院前端小課堂，每篇分享文從 八個方面深度解析前端知識 技能，本篇分享的是 position定位有哪幾種？各有什麼特點 一 背景介紹 position 是css用來為html文件的一些元素提供定位的屬性,定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對于父元素...

css定位有哪幾種方式？

相信很多的初學者和我一樣在剛接觸有關浮動和定位都有些搞不清楚，在這裡我將介紹一下我所理解的有關 css的定位方式。在css中浮動主要是解決一些有關布局的左右排列問題，其實定位的作用和浮動的作用差不多，不過區 別是定位用來解決疊加排列的問題。在用定位時，你需要寫position屬性，position ...

css定位哪幾種方式

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