позиционирование нового элемента на основе позиции существующего элемента?

Question

Я использую следующий код (Javascript на веб-странице) для динамического создания «нового» элемента в DOM. Я хочу расположить это, скажем, 200px «ниже» существующего элемента. Однако мой вывод имеет неправильное позиционирование нового элемента (ов) ... как будто указанная мной позиция (вверху слева) игнорируется.

var _reference = document.getElementById("outputs");

for (_count = 0; _count < _limits; _count++) {

 var _structure = document.createElement("div"); 
 _structure.setAttribute("class", "container-fluid");
 _structure.setAttribute("id", "struct_" + _tally);
  if (_count === 0){
  _rect = _reference.getBoundingClientRect();  
    //get the bounding box of the "outputs" id element...
  document.getElementById("outputs").appendChild(_structure);   
  _structure.style.top = _rect.top + "200px";  //NOT positioned 200px below 'outputs'
  _structure.style.left = _rect.left;  //NOT positioned same position as 'outputs'
  }  //_count is "0"

}  //for loop

Я бы подумал, что это должно быть довольно просто ... однако это сводит меня с ума ... любая помощь приветствуется.

Answer 1

Для того, чтобы это работало, вам нужно установить свою позицию на действительную или абсолютную, также обратите внимание, что position: absolute устанавливает позицию в соответствии с ближайшим относительным позиционируемым родителем, а position: относительные позиции в соответствии с текущей позицией элемента

Answer 2

Вам нужно будет установить _structure.style.position в значение'lative ',' absolute ',' fixed 'или' sticky ', чтобы использовать top, left, right, bottom.