如何理解CSS position屬性中absolute和relative的應用

這期內容當中小編將會給大家帶來有關如何理解CSS position屬性中absolute和relative的應用，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

向大家描述一下CSS中position的absolute和relative的應用，position屬性其實是指本體對上級的定位，absolute是指絕對定位，而relative是指相對定位，position的屬性值的效果，直接受其容器樣式中position屬性值影響。

CSS中position的absolute和relative的應用

CSS中Position屬性

之前老弄不明白，只能憑借一點短期內“虐出來的經驗”制作需要的效果，后來仔細研究了一下Hutia的XScroller，并且仔細看了文檔，才知道這個position屬性其實是指本體對上級的定位。如果這么理解，就好辦了。

默認的屬性值都是static，靜態。就不用多說了。最關鍵的是relative（相對）以及absolute（絕對）。往往我們如果是COPY別人的代碼，會把absolute屬性與left、top配合起來制作相關的“懸浮層”效果。然而有時候我們需要針對某一個容器的懸浮效果，而不是針對窗口的。這時候通過高度、寬度的計算不但麻煩，而且幾乎無法***實現效果。我一開始也無能為力，后來發現只要把其上一級的樣式屬性position設置為relative就可以了。

也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。例如如下A-B的嵌套結構：

viewplaincopytoclipboardprint?

<dividdivid="A"> <dividdivid="B"> </div> </div>  <dividdivid="A"> <dividdivid="B"> </div> </div>

當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對窗口文檔，而是針對id為A的這個div了。

這樣在開發一些基于B/S應用程序的時候，就能很方便的添加一些UI元素，例如某一個活動層的關閉按鈕等。

上述就是小編為大家分享的如何理解CSS position屬性中absolute和relative的應用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。