Положение лайтбокс - Fancybox

Question

Мне нужно расположить лайтбокс над частью изображения. Я попытался добавить этот CSS:

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

Когда я делаю это, он ломает лайтбокс. Как мне разместить лайтбокс? (Я использую Fancybox) вот мой 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>

Теперь, как мне разместить изображение там, где я хочу, чтобы оно отображалось в лайтбоксе?

Answer 1

Вам нужно нацелиться на fancybox-outer

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