1

我有以下问题:我的页面有一个包含项目的图像。我将隐藏的 div 放在项目上以创建鼠标悬停效果。我用相对位置进行 div 的定位。一切正常,但我在页面末尾有一个空白区域和一个滚动条:(

  <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)">&nbsp;</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)">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</div>
  </div>
4

2 回答 2

5

使用margin-top而不是top因为top与position:relative产生相反的差距。

于 2012-09-18T09:44:28.193 回答
0

设置 position:relative 到他们的父 div,然后在孩子上使用 position:absolute。

于 2014-02-10T18:58:04.600 回答