Динамическое позиционирование внутри относительного div - PullRequest
Новая
       10

Динамическое позиционирование внутри относительного div

1 голос
/ 01 мая 2010

Я пытаюсь заставить работать виджет javascript палитры цветов на странице с кучей «вещей», которые я не могу изменить. Некоторые "вещи" приводят к тому, что палитра цветов при щелчке появляется значительно ниже ссылки. Я сократил это до простого примера ниже.

То, что должно произойти, это когда вы нажимаете «ссылка 1», «div1» должен перемещаться непосредственно под «ссылкой 1». Что на самом деле происходит, так это то, что «div 1» появляется намного ниже «link 1». Если вы удалите position: relative; из определения CSS для divMain, «div 1» будет правильно расположен.

Как разместить "div 1" непосредственно под "ссылкой 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>

1 Ответ

1 голос
/ 01 мая 2010

Положение div относительно внутреннего контейнера с его установленным положением. Так что в этом случае он заканчивается на 200px вправо и вниз от divMain. Без позиции, установленной на divMain, она позиционируется относительно тела.

Если вы хотите, чтобы оно было прямо под ссылкой, поместите и 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 равен 0px, 16px от добавленного мной div, а не от divMain.

...