Question

By default the colorbox appears centered both vertically and horizontally on the screen. Is there a way to change that, for example to 10% from top vertically and centered horizontally?

Answer 1

This will override the top position, and you can do the same with left etc:

#colorbox { top: 100px !important; }

10% from top would be trickier, you’d have to implement your own positioning logic in an onload callback everytime the colorbox is shown, or extend colorbox’s code, but no quick way to do that.

UPDATE

Colorbox now has a built-in option to do this:

$("a").colorbox({ top: 100, left: "50%" })

UPDATE 2

If you’re not bound to colorbox, I highly recommend using qTip2.
Far better position handling (jQuery UI style), cleaner HTML output and easier IE<8 support.