绝对定位不脱离文档流的方法

 

　　　　最近在做移动页面开发，其中要实现对页面元素进行拖动，很多地方都使用表格来固定，使增加拖动事件的元素，即使受到绝对定位的影响，也总是还会自己的单元格内。

　　　　而其中一类情况，比较特殊，是对图片的拖动，图片是不一样大的，也不能改成一样大，都应该挤在 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]);
            }
        }