Question

我正在尝试在Chrome开发人员工具中找到一种方法，以找到具有相对位置或绝对位置的父元素，以将焦点所在的元素绝对定位。我已经在Javascript中找到了.postionParent来获取该信息，但是有没有一种方法可以在FF的Chrome中获取该信息，而无需手动查看所有父级以找到相对定位的父级？谢谢-梅林

Answer 1

下面是一个简单脚本的示例，该脚本将console.log首次出现位置绝对或相对的父代。

要正确使用此方法，请使用适合您要查看父元素的元素的选择器来更改currentElement，也可以采用炫酷的方式

打开开发工具并检查您的元素。现在，该元素将显示为灰色，并且后面将出现== $0。这意味着您只需键入$0就可以在控制台中引用该元素。

现在，在开发工具中选择元素。将以下脚本复制到开发人员控制台中，并在执行之前将currentElement更改为currentElement = $0。

执行脚本（按Enter键），然后等待直到元素记录在控制台中。

在记录元素后，您可以将其悬停在控制台中以在页面中查看。如果您看不到页面上突出显示的元素，则可以右键单击控制台记录的元素，然后选择“滚动到视图”

console.log('started searching')
let currentElement = document.getElementById('test')
let run = true
const values = ['absolute', 'relative']

while (run) {
  const elementPositionValue = window.getComputedStyle(currentElement).getPropertyValue('position')
  const hasValueWeWant = values.includes(elementPositionValue)

  if (currentElement.tagName === "BODY" && !hasValueWeWant) {
    console.log('No elements with', values)
    run = false
  }

  if (hasValueWeWant) {
    console.log('Found element: ', currentElement)
    run = false
  } else {
    currentElement = currentElement.parentElement
  }
}

<div>
  <div>
    <div style="position:relative;">
      <div>
        <div>
          <div>
            <div>
              <p id="test">
                crazy indented
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何查找具有位置：绝对或位置：相对的最近祖先

1 个答案: