内部元素的位置被父div的pos

Question

我的div固定在页面底部。在该div区域内，会弹出一个按钮（2秒后），用户可以单击该按钮以关闭住房div。

外壳div的位置为fixed，按钮为absolute和top:0;right:0;。但是，当显示元素时（如代码段所示），按钮的样式将更改为"font-size: 12px; font-family: tahoma; right: 0px; color: rgb(85, 85, 85); visibility: visible;"，从而删除原始的绝对值。如果我使用inspect元素将其手动添加到其中，它将按预期移至右侧。但是为什么不首先显示呢？

adh('test', 320, 100);

function adh(dfp, len, hgt) {
  var adhBase = document.createElement('div');
  adhBase.id = dfp;
  if (false) {
    // is there mobile horizon???
  } else {
    adhBase.style = "z-index:9999;height:" + hgt + "px;position:fixed;bottom: 0;left: 50%;width:" + len + "px;transform: translateX(-50%);box-sizing: border-box;background-color:lightblue;";
  }
  document.body.appendChild(adhBase);

  // Close button
  var adhClose = document.createElement('button');
  adhClose.id = 'closeBtn';
  adhClose.style = 'font-size:12px;font-family:tahoma;position:absolute:top:0;right:0;border:1 px solid #ccc;color: #555;box-sizing:border-box:text-decoration:none;visibility:hidden';
  adhClose.innerHTML = 'close';
  document.getElementById(dfp).appendChild(adhClose);
  console.log('3');
  // function that closes the button
  document.getElementById('closeBtn').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
  });
  setTimeout(function() {
    adhClose.style.visibility = "visible"
  }, 2000);
}