Wie kann festgestellt werden, ob ein Element "positioniert" ist?

Question

Entsprechend MDN, absolute-positionierte Elemente sind positioniert "relativ zu seinem nächsten positionierten Vorfahren".

Ich weiß, wie man den DOM-Baum durchläuft, aber wie kann ich feststellen, ob ein Element als "positioniert" betrachtet wird oder nicht?

Answer 1

Siehe the specification:

Ein Element, das positioniert ist, wenn seine ‚Position‘ Eigenschaft einen anderen Wert als ‚statischen‘ hat.

Answer 2

Hier ist ein kleines Beispiel dafür, wie die absolute Position eines Elements zu erhalten:

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`, 
 
})

#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; 
 
}

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