使用javascript实现绝对位置响应

我已经创建了一个代码片段来演示我的问题

img{
边框：1px实心；
}
.泡泡糖1{
宽度：50px；
高度：50px；
背景：粉红色；
不透明度：0.8；
位置：绝对位置；
顶部：65px；
左：45像素；
}
.泡泡糖2{
宽度：50px；
高度：50px；
背景：青色；
不透明度：0.8；
位置：绝对位置；
顶部：135px；
左：155px；
}
.泡泡糖3{
宽度：50px；
高度：50px；
背景：橙色；
不透明度：0.8；
位置：绝对位置；
顶部：190px；
左：68px；
}
.泡泡糖{
宽度：50px；
高度：50px；
背景：红色；
不透明度：0.8；
位置：绝对位置；
顶部：220px；
左：213px；
}

$（函数（）{
var init_width=$（window.width（）；
var all_div=$（'div'）；
var init_left=函数（）{
var结果=[]；
所有分区（功能（i）{
var left=parseInt（$（all_div[i]）.css（'left'）；
结果：推（左）；
});
返回结果；
}();  
$（窗口）。调整大小（函数（）{
变量宽度=$（窗口）.width（）；
所有分区（功能（i）{
var now_left=init_left[i]/init_width*width；
$（all_div[i]）.css（'left'，now_left）；
});
});  
});
img{
边框：1px实心；
}
.泡泡糖1{
宽度：50px；
高度：50px；
背景：粉红色；
不透明度：0.8；
位置：绝对位置；
顶部：65px；
左：45像素；
}
.泡泡糖2{
宽度：50px；
高度：50px；
背景：青色；
不透明度：0.8；
位置：绝对位置；
顶部：135px；
左：155px；
}
.泡泡糖3{
宽度：50px；
高度：50px；
背景：橙色；
不透明度：0.8；
位置：绝对位置；
顶部：190px；
左：68px；
}
.泡泡糖{
宽度：50px；
高度：50px；
背景：红色；
不透明度：0.8；
位置：绝对位置；
顶部：220px；
左：213px；
}
您真的需要javascript解决方案吗

为什么不能在CSS位置样式中使用百分比


img{
边框：1px实心；
}
.泡泡糖1{
宽度：50px；
高度：50px；
背景：粉红色；
不透明度：0.8；
位置：绝对位置；
最高：15%；
左：10%；
}
.泡泡糖2{
宽度：50px；
高度：50px；
背景：青色；
不透明度：0.8；
位置：绝对位置；
最高：30%；
右：30%；
}
.泡泡糖3{
宽度：50px；
高度：50px；
背景：橙色；
不透明度：0.8；
位置：绝对位置；
底部：30%；
左：30%；
}
.泡泡糖{
宽度：50px；
高度：50px；
背景：红色；
不透明度：0.8；
位置：绝对位置；
底部：20%；
右：10%；
}

这是一个很酷的解决方案！init在不同大小的视口中工作吗？@JamesLemon当然，divs的位置取决于css样式值。如果你包含背景图像，你的代码实际上不工作，因为img的x除了向左上下移动。@JamesLemon很简单。仅使用img宽度作为参考，而不是窗口宽度。