如何使用"position: absolute“检测元素？

Question

我试图将一个元素精确地定位在另一个元素的"X“坐标中。在stackoverflow中有许多解决方案可以使用下面的内容来获得位置：

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

我的问题是，当我试图将值应用于其他元素中定位为“绝对”的元素的"element.style.left“时，元素位置变得更大，因为"left: 0”是绝对元素的开始，而不是文档的"left: 0“。

使用“绝对”的“嵌套”元素越多，差异就越大。

有没有办法用"position: absolute“来检测元素，这样我就可以通过用"absolute”打折每个元素的"left“来偏移要定位的实际值？

这就是问题：

  <span class="dropdown-label">Some menu</span>
  <nav class="dropdown-menu">
    <a class="item">Email</a>
    <a class="item">Twitter</a>
    <a class="item">Tumblr Blog</a>
    <span class="dropdown-label">Another menu</span>
    <nav class="dropdown-menu">
      <a class="item">Foo</a>
      <a class="item">Bar</a>
      <a class="item">I'm Batman</a>
      <span class="dropdown-label">Yet another menu</span>
      <nav id="finales" class="power-dropdown">
        <a class="item">Foo</a>
        <a class="item">Bar</a>
        <a class="item">I'm Robin</a>
      </nav>
    </nav>
  </nav>

每个dropdown都需要使用其各自标签的"lef“来定位，但是我们在其他dropdown中有dropdown，并且每个dropdown都是绝对定位的。

我知道我可以通过为每个定位为“相对”的下拉列表使用一个“容器”来避免这个问题，因此我不需要动态地将“左”设置为任何值。

问题是HTML变得更冗长，这是我想要避免的，另外我想控制下拉菜单的显示方式，以防止它被拉出屏幕。

但我似乎遇到了一个无法解决的问题，因为我在任何地方都找不到一种方法来检测使用“绝对”来定位的元素。

有没有类似于"element.position“的东西可以给我提供这个信息？

Answer 1

您需要一种方法来检测元素上的position: absolute。

使用window.getComputedStyle(element).position。

​

function findAbsoluteElementsFromList(list){
  var ret = [];
  
  for (var i = 0; i < list.length; i++)
    if (window.getComputedStyle(list[i]).position === 'absolute')
      ret.push(list[i]);
      
  return ret;
}

console.log(findAbsoluteElementsFromList(document.querySelectorAll('div')));

.div {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  transform: translateY(50%);
}
#a {
  position: relative;
  left: 0;
  background-color: #f00;
}
#b {
  left: 25px;
  background-color: #0f0;
}
#c {
  left: 50px;
  background-color: #00f;
}

<div class="div" id="a">
  <div class="div" id="b">
    <div class="div" id="c"></div>
  </div>
</div>

​

可以使用相同的函数来获取所有其他的CSS值。

Window.getComputedStyle和Element.getBoundingClientRect()有什么不同？阅读here。

为什么不能直接使用element.style.position呢？阅读here。