如何确定元素是否“定位”？

Question

根据MDN，absolute - 定位的元素位于“相对于其最近的祖先”。

我知道如何遍历DOM树，但我如何确定元素是否被视为“定位”？

Answer 1

请参阅the specification：

  

如果一个元素的'position'属性的值不是'static'，则称该元素被定位。

Answer 2

这是一个如何获得元素绝对位置的小例子：

＆＃13;

＆＃13;

let target = document.getElementById('e');


let p = target;
let pos;
do {
  p = p.parentElement;
  pos = window.getComputedStyle(p).getPropertyValue("position");
} while (p.parentElement && pos === 'static');



let rect = target.getBoundingClientRect();
let offset = p.getBoundingClientRect();



let output = document.getElementById('o');

let x = rect.left - offset.left;
let y = rect.top - offset.top;

output.innerText = `Rect: ${rect.left}, ${rect.top}
Offset: ${offset.left}, ${offset.top}
Fixed: ${x}, ${y}
`;

let overlay = document.getElementById('overlay');



Object.assign(overlay.style, {
  left: `${x}px`,
  top: `${y + rect.height}px`,
})

＆＃13;

#a {
  border: 1px solid red;
  padding: 5px 10px 2px 8px;
}

#b {
  border: 1px solid blue;
  padding: 2px 7px 5px 6px;
  position: relative;
}

#c {
  border: 1px solid green;
  padding: 9px 10px 4px 8px;
}

#d {
  border: 1px solid orange;
  padding: 1px 6px 9px 18px;
}

#e {
  border: 1px solid cyan;
  padding: 4px 12px 2px 3px;
}

output {
  font-family: monospace;
  white-space: pre;
  margin-top: 10px;
}

#overlay {
  background-color: rgba(255, 255, 0, .8);
  position: absolute;
  width: 200px;
}

＆＃13;

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d">
        <div id="e">
          Hello
          <div id="overlay">Positioned directly under cyan box</div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>



<output id="o">

＆＃13;

＆＃13;

＆＃13;