Css絕對(duì)定位的技巧有哪些

本篇內(nèi)容主要講解“Css絕對(duì)定位的技巧有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Css絕對(duì)定位的技巧有哪些”吧!

1.子絕父相

在絕大多數(shù)情況下，子元素的絕對(duì)定位都是相對(duì)于父元素進(jìn)行定位的，雖然給父元素的position設(shè)置relative、absolute、fixed都可以，但是如果不希望父元素脫標(biāo)，常用解決方案是：

父元素設(shè)置position: relative;（讓父元素成為定位元素，又不脫離標(biāo)準(zhǔn)流）；

子元素設(shè)置position: absolute;；

2.絕對(duì)定位元素的公式應(yīng)用

絕對(duì)定位元素（absolutely positioned element）：position值為absolute或者fixed的元素，因?yàn)閍bsolute在沒有找到祖先定位元素時(shí)，也是參考視口進(jìn)行定位的，和fixed的效果一樣。

對(duì)于絕對(duì)定位的元素，會(huì)滿足以下兩個(gè)公式：

定位參照對(duì)象的寬度 = left + right + margin-left + margin-right + 絕對(duì)定位元素實(shí)際占用寬度；

定位參照對(duì)象的高度 = top + bottom + margin-top + margin-bottom + 絕對(duì)定位元素實(shí)際占用高度；

如果希望絕對(duì)定位元素的寬高和定位參照對(duì)象一樣，可以給絕對(duì)定位元素設(shè)置以下屬性，這也是為什么定位能夠?qū)崿F(xiàn)盒子的水平垂直居中。

left、right、top、bottom全部設(shè)置為0，margin設(shè)置為auto；

根據(jù)上面公式，margin + 絕對(duì)定位元素實(shí)際占用寬高 = 定位參照對(duì)象的寬高，盒子自然就水平垂直居中顯示了

到此，相信大家對(duì)“Css絕對(duì)定位的技巧有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！