jQuery UI Tabs - absolute positioning not working

I'd like to display image on top of div using absolute positioning within jQuery's tab widget but I 开发者_如何学运维cannot. I think it is some sort of dependency issue but I can't figure it out. Here's my code:

    <div id="tabs" style="width: 50%">
      <ul>
            <li><a href="#tabs-1">1st</a></li>
            <li><a href="#tabs-2">2nd</a></li>
            <li><a href="#tabs-3">3rd</a></li>
        </ul>
            <div id="tabs-2">         
            <div style="position: relative; left: 0; top: 0;">
                <img border="0" src="s7-200.gif" alt= "" style="position: relative; top: 0; left: 0; z-index: 5" />

                <img border="0" src="green-dot.jpg" style="position: absolute; top: 50; left: 100;"/>        
                </div>
      </div>
        <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>

Any suggestions?

yep how about making top and left in px? 50px;? instead of 50 ?