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”来检测元素，以便通过将每个元素的“ left”都减去“ absolute”来抵消要定位的实际值？

这是问题所在

  <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>

每个下拉菜单都需要使用其相应标签的“ lef”进行定位，但是我们在其他下拉菜单中都包含下拉菜单，并且每个下拉菜单都是绝对定位的。

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

问题是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。

如何使用“位置：绝对”检测元素？

1 个答案: