DIV相對定位

其實是個很簡單的css技巧。這裡記錄一下基本的思路和具體的用法。

基礎：

DIV的定位方法由其position屬性來決定，absolute為絕對定位，relative為相對定位。定位的位置則由top、left兩個 屬性來确定。

無論absolute還是relative，都是相對目前div的最近的一個已定位的祖先元素來定位的。

另外，relative會在html的文檔流中占據一定位置；而absolute則不會。也就是說，relative定位相當于word中的“文字 環繞圖檔”，而absolute則是“圖檔浮于文字上方”。

思路：

div的相對定位的思路很簡單。嵌套的定義兩個div；讓外層div随頁面布局而動，讓裡層div以外層div為基準進行絕對定位。

用法：

這是從我的工程裡摘出來的一段代碼。沒用的東西我都删去了。

<s:textfield onfocus="showImgTip('img_e_no')"

            onblur="hideImgTip('img_e_no')"/>

           <div style="position: relative;">

            <div id="Layer2"

             style="position: absolute; left: 0px; top: 0px;">

             <img src="<%=basePath%>carChannel/images/tip_engeen_no.jpg"

              border="0" style="display: none;" id="img_e_no" />

            </div>

本文轉自 斯然在天邊 51CTO部落格，原文連結：http://blog.51cto.com/winters1224/798926，如需轉載請自行聯系原作者