1

変更できない「もの」がたくさんあるページでカラーピッカーJavaScriptウィジェットを動作させようとしています。クリックすると、カラーピッカーがリンクのかなり下に表示される「もの」がいくつかあります。以下の簡単な例にまとめました。

「link 1」をクリックすると、「div1」が「link 1」のすぐ下に移動するはずです。実際には、「div 1」が「link 1」の下に表示されます。position: relative;の CSS 定義から削除するとdivMain、「div 1」が正しく配置されます。

削除せずに「リンク 1」の直下に「div 1」を配置するにはどうすればよいposition: relative;ですか?

function setPos(aname, dname) {
  var o = document.getElementById(aname);
  var ol = o.offsetLeft;
  while ((o = o.offsetParent) != null) {
    ol += o.offsetLeft;
  }
  o = document.getElementById(aname);
  var ot = o.offsetTop + 25;
  while ((o = o.offsetParent) != null) {
    ot += o.offsetTop;
  }
  document.getElementById(dname).style.left = ol + "px";
  document.getElementById(dname).style.top = ot + "px";
}
h1 {
  height: 50px;
}

#divMain {
  position: relative;
}
<h1></h1>
<div id="divMain">
  <a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a>
  <div id="div1" style="position:absolute;border-style:solid;left:200px;top:200px;">div 1</div>
</div>

4

1 に答える 1

1

div の位置は、その位置が設定された最も内側のコンテナーに相対的です。したがって、この場合、divMain から右方向および下方向に 200 ピクセルになります。divMain に位置が設定されていない場合は、body に対して相対的に配置されます。

リンクのすぐ下に配置する場合は、link1 と div1 の両方を位置のある要素内に配置します。したがって、これを次のように変更します。

<div id="divMain">
    <div style="position:relative;">
        <a href="#" onClick="setPos('link1','div1');return false;" name="link1" id="link1">link 1</a>
        <div id="div1" style="position:absolute;border-style:solid;left:0px;top:16px;">div 1</div>
    </div>
</div>

(リンクの下に配置するために、まだ 16 ピクセル下にポップしていることに注意してください。)

これは、div1 が divMain からではなく、追加した div から 0px,16px であることを意味します。

于 2010-04-30T23:05:11.547 に答える