位置灯箱-Fancybox

Question

I need to position my lightbox over a part of the image. I tried adding this CSS:

#globe{
position:absolute;
left:170px;
top: 50px;
} 

When I do that it breaks the lightbox. How do I position the lightbox? (I am using Fancybox) here is my HTML:

<p><a id="fancy" href="#globe"><img class="center" style="width:620px;" 
src="/messages4u/2011/images/october/baby-n-grandfather.jpg" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="hide"><div id="globe">
<img src="/messages4u/2011/images/october/globe-text.png" width="400" 
height="400" /></div></div>

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("a#fancy").fancybox({
    'padding' : 0,
    'overlayShow' : false,
});
});
</script>

Now how do I position the image where I want it displayed in the lightbox?

Answer 1

You need to target fancybox-outer

#fancybox-outer{
position:absolute;
left:170px;
top: 50px;
}