查找所有具有绝对位置的父元素答案

【问题标题】：Find all parent elements with absolute position查找所有具有绝对位置的父元素
【发布时间】：2013-04-11 04:20:04
【问题描述】：

我正在编写一些 javascript 代码来将所有绝对定位的元素向下移动 60 像素（低于 60 像素高度的 div，我在代理上的其他页面顶部显示）。这是我现在的代码（主要是从stackoverflow上的另一个问题借来的）：

function getStyle(el, prop)
{
  var doc = el.ownerDocument;
  var view = doc.defaultView;
  if (view && view.getComputedStyle)
  {
    return view.getComputedStyle(el, '')[prop];
  }

  return el.currentStyle[prop];
}

function runAfterLoad()
{
  var all = document.getElementsByTagName('*');
  var i = all.length;
  while (i--)
  {
    var topOffset = parseInt(all[i].offsetTop, 10);
    if (getStyle(all[i], 'position') === 'absolute')
    {
      all[i].style.top = isNaN(topOffset) ? '60px' : (topOffset + 60) + 'px';
    }
  }
}

不幸的是，这会将所有绝对定位的元素向下移动 60 像素。事实证明，我发现绝对定位实际上并不是浏览器窗口的绝对定位，而是满足某些特定规则的父级的绝对定位。这是这里另一个答案的引述：

之所以有效，是因为“位置：绝对”的意思是“使用上、右、下、左”来相对于最近的具有“位置：绝对”或“位置：相对”的祖先定位自己。”

因此，我正在寻求有关如何调整当前代码以仅查找具有绝对位置且没有父级也是绝对或相对定位的元素的帮助。非常感谢任何帮助。

【问题讨论】：

每个 HTMLElement 都有一个 offsetParent 属性，它告诉您哪个 Node 用作该元素位置的参考。

标签： javascript html css-position

【解决方案1】：

另一种选择是利用这一事实来发挥自己的优势。如果您要将整个页面包装在一个div 中，而您使用top: 60px 绝对（或相对）定位，您实际上会立即将整个页面向下移动60px。

这也会移动非绝对元素。如果不希望这样做，那么这将不起作用。

【讨论】：