絕對定位不脫離文檔流的方法

 

　　　　最近在做移動頁面開發，其中要實現對頁面元素進行拖動，很多地方都使用表格來固定，使增加拖動事件的元素，即使受到絕對定位的影響，也總是還會自己的單元格內。

　　　　而其中一類情況，比較特殊，是對圖片的拖動，圖片是不一樣大的，也不能改成一樣大，都應該擠在 div 內，頁面加載完成后，使用 jquery.pep.js 給每個圖片增加拖動，發現其中一個一增加拖動，

其他的全部都因為受到插件將 默認定位 轉換成 絕對定位，當其中1個 一旦轉換成了絕對定位，這樣其他的當也要轉絕對定位的時候，因為前面的圖片脫離文檔流，后面又跟上來。。。麻煩，圖片都寄疊加到一塊了。。。

　　　　想了半天，都知道該怎么解決？ 給圖片增加點擊事件，然后通過事件來增加拖動。。試了下，不好使，有點問題。

　　　　百度找了下，有的說，給圖片增加 margin ，padding ,有的說再加一個相同大小的元素，給它撐開。。。 想了，那樣都很是麻煩。。。

　　　　終於想到一個好辦法，分享出來：可以在頁面加載之前就是用默認定位，加載完成之后，自己先對所有要進行絕對定位的元素，都設一遍，都設成 絕對定位，這樣的話，既能看上去還是老樣子，像沒有脫離文檔流一樣，又能在不影響顯示效果的情況下實現功能。

　　　　以下代碼：傳入一個父元素，將父元素下所有的絕對定位獲取出來，先存起來，然后再遍歷一遍，都一個都設成絕對定位。

　　　　

        function changeToAbsPosition(parent) {
            var arr = $(parent).children();
            var arrPos = new Array();
            for (var j = 0; j < arr.length; j++) {              
                var ofs = $(arr[j]).offset();
                var top = ofs.top;
                var left = ofs.left;
                arrPos.push({ "position": "absolute", "top": top + "px", "left": left + "px" });
            }
            for (var j = 0; j < arrPos.length; j++) {               
                $(arr[j]).css(arrPos[j]);
            }
        }