Javascript 如何为jquery colorbox模式设置不同的位置？

默认情况下，颜色框在屏幕上垂直和水平居中显示。有没有办法改变这一点，例如我有这样的东西：

1） foo 2）bar 2）bar 3）more 4）foobar 5）barfoo

---

现在，当用户单击foo时，我希望colorbox显示为left:20%，top:-200px；当用户单击工具栏时，我希望colorbox显示在相同的顶部位置（-200px），但这次，50%显示在左侧，单击更多将显示在左侧60%，foobar显示在左侧70%，依此类推。我怎么可能实现这一点，而不必为每个元素设置一个类并对所有这些元素执行css呢？谢谢使用定位设置

$('a#foo').colorbox({top:'-200px', left:'20%'});
$('a#bar').colorbox({top:'300px', left:'40%'}); 

我猜是这样的；我还没有测试过，但希望它能帮你找到正确的方向

 var topposition = '220';
 var leftposition = '10';
 $('a#bar').colorbox({top: topposition+'px', left:leftposition+'px', onComplete: function () {
    topposition = ($('#colorbox').offset().top) + 50;
    leftposition = ($('#colorbox').offset().left) + 10;
}});

看看这把小提琴，这样你就可以看到它在演奏

---

听起来你好像在尝试做一些类似下拉菜单的事情。 只要颜色框项位于菜单项中，就可以使用CSS将所有内容放置在所需的位置

菜单项必须是相对位置的，颜色框的位置必须是绝对位置的，然后您可以仅使用一个类来移动它们，并使用相同的类来隐藏和显示它们

---

希望这会有所帮助，而这正是我想要避免的。设置它们各自的位置。我不能把位置设为相对于列表的位置。例如，每一个函数的左边都有2px，而不必为每一个函数手工编写代码？小提琴每次在onComplete函数的位置上添加大约40px。如果需要，可以添加一些if语句来确定位置，每次只更新这些变量。你有没有发现这个问题？没有，我还在研究中。希望我能想出一个解决办法（你有同样的问题吗？我下面的解决方案对你不起作用-我能够相对于前一个来定位每个问题