How to specify 2 different positions for Colorbox on the same page?

I'm building a page that has two Colorboxes.

Right now, I've managed to make any Colorbox in general to appear in a fixed position by adjusting the colorbox.css file:

#colorbox, #cboxOverlay {position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxWrapper { position:fixed; margin:0 auto; z-index:开发者_JAVA技巧9999; overflow:hidden; right:0; top:18px;}

However, I'd really like to be able to position my two Colorboxes separately. My train of thought for this is to have two different CSS (e.g. colorbox.css and colorbox2.css) and make adjustments accordingly, but how do I tell which Colorbox to follow which CSS file?

I'm kinda between beginner and intermediate levels if that makes sense, so it'd be great if anybody could help me out with this.

Thanks!

---

you just have to add a class for one colorbox and override position rules for this class.

---

the best way is to setup the colorboxed with different arguments

$(".colorbox1").each(function(i) {
    $(this).colorbox({top:200});
});

$(".colorbox2").each(function(i) {
    $(this).colorbox({top:100});
});