I have a following problem: my page has an image with items. I put hidden divs over the items to create mouseover effects. I do the positioning of divs vith position relative.
Everything works but I get an empty space at the end of the page and a scrollbar 🙁
<div style="height: 620px;">
<?php echo image_tag('startpage/bg.png', array('style' => 'width: 124px; height: 620px; border:0;'))?><?php echo image_tag('startpage/startpage.png', array('style' => 'border:0;'))?><?php echo image_tag('startpage/bg.png', array('style' => 'width: 124px; height: 620px; border:0;'))?>
<div id="start-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -281px; left: 157px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0)"> </div>
<div id="segmentation-circle" style="position:relative; border-radius: 58px; width:115px; height: 115px; top: -377px; left: 286px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0)"> </div>
<div id="campaign-circle" style="position:relative; border-radius: 58px; width:115px; height: 115px; top: -490px; left: 456px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="overview-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -748px; left: 585px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="dm-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -730px; left: 585px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="td-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -711px; left: 585px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="offer-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -695px; left: 585px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="program-rectangle" style="position:relative; width:112px; height: 25px; top: -1072px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="country-rectangle" style="position:relative; width:112px; height: 25px; top: -1066px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="metric-rectangle" style="position:relative; width:112px; height: 25px; top: -1059px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="email-rectangle" style="position:relative; width:112px; height: 25px; top: -1047px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="tm-rectangle" style="position:relative; width:112px; height: 25px; top: -1040px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="dm-rectangle" style="position:relative; width:112px; height: 25px; top: -1035px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="ad-rectangle" style="position:relative; width:112px; height: 25px; top: -1022px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="sm-rectangle" style="position:relative; width:112px; height: 25px; top: -1017px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="pr-rectangle" style="position:relative; width:112px; height: 25px; top: -1012px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="event-rectangle" style="position:relative; width:112px; height: 25px; top: -983px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="ma-rectangle" style="position:relative; width:112px; height: 25px; top: -977px; left: 677px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="submit-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -1187px; left: 851px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
<div id="end-circle" style="position:relative; border-radius: 40px; width:80px; height: 80px; top: -1267px; left: 989px; background-color: #ffffff; opacity: 0; filter:alpha(opacity=0);"> </div>
</div>
Use margin-top instead of top because top create a opposite gap with position:relative.