css ppt操作面板 预览时其中标签定位问题

最近用网页写了一个类似PPT页面板操作功能，就是把文本框和图片放入操作面板后，手动拖动到自定义位置，并可以控制文本框和图片大小，但是在预览时位置怎么都放不对，可能跟我css知识不扎实有关，两天没解决，好好睡了一觉解决了，睡觉有益身心健康。

原先思路：

1、在Div中的文本框和图片设置：position:relative

2、Left和Top通过根据前一个标签位置和长宽来计算第二个标签的Left和Top

问题：

        计算起来特别麻烦，很容易错位，而且如果标签放置位置为“品”字型或者L型，情况特别多，每一种都不一样，尤其通过从上到下标签放置顺序乱了，样式全乱掉了。非常不推荐

目前问题已解决，下面我说明一下

正确思路：

1、外层Div设置：position:relative;

2、内层文本框和图片设置：position: absolute;

3、通过js给文本框和图片设置Left和Top时，计算屏幕大小，结合原设置面板中大小控制Left和Top大小，

        原：原来是算比例，及Left = X * (屏幕Width/面板Width)，同理Top = Y * (屏幕Height * 面板Height)。

        新：通过算两边的差距，及Left = X + (屏幕Width - 面板Width)/2，同理Top = Y + (屏幕Height - 面板Height)/2

第一步和第二步是最重要的，在面板展示和在画布上展示都会需要

预览展示：

是不是位置差不多啊。希望可以给你带来一些借鉴