JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <h1>outer</h1>
  <div id="inner">
    <h2>inner</h2>
  </div>
</div>







<table>
    <thead>
      <tr>
        <th>outer.style</th>
        <th>inner.offsetParent</th>
      </tr>
    </thead>
    <tbody id="log"></tbody>
  </table>

CSS

<style>
    h1, h2 {
      font: 16px/normal sans-serif;
      margin: 0;
    }
    div {
      margin: 20px;
    }
    #outer {
      border: 10px solid black;
    }
    #inner {
      border: 10px solid #ccc;
    }
    table {
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid black;
      padding: 5px 20px;
    }
    .result {
      text-align: center;
    }
  </style>

JavaScript

const $outer = document.getElementById('outer');
    const $inner = document.getElementById('inner');
    const $log = document.getElementById('log');
    const styles = [
      "/* empty */",
      "position: relative",
      "transform: translate(0)",
      "will-change: position",
      "will-change: transform",
      ];
    for (var s of styles) {
      $outer.style.cssText = s;
      var $tr = document.createElement('tr');
      var $td = document.createElement('td');
      $td.textContent = s;
      $tr.appendChild($td);
      $td = document.createElement('td');
      $td.className = "result";
      var $offsetParent = $inner.offsetParent;
      if ($offsetParent == $outer) {
        $td.textContent = "outer";
      } else if ($offsetParent == document.body) {
        $td.textContent = "body";
      } else {
        $td.textContent = "???";
      }
      $tr.appendChild($td);
      $log.appendChild($tr);
    }
    $outer.style = "";