CSS中position的absolute和relative的應用

來源:互聯網
上載者:User

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

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

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

<div id="A">

 <div id="B">

 </div>

</div>

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

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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.