1

次の問題があります:私のページにアイテムを含む画像があります。マウスオーバー効果を作成するために、アイテムの上に非表示のdivを配置しました。私はdivsvithpositionrelativeのポジショニングを行います。すべてが機能しますが、ページの最後に空のスペースとスクロールバーが表示されます:(

  <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

topはposition:relativeと反対のギャップを作成するため、 topの代わりにmargin-topを使用します。

于 2012-09-18T09:44:28.193 に答える
0

親divに対してposition:relativeを設定してから、子に対してposition:absoluteを使用します。

于 2014-02-10T18:58:04.600 に答える