JSFiddle - React, Tailwind, and code Playground

HTML

<div class="static   inline visible">static   inline visible <div class="static   inline visible">static   inline visible</div>
<div class="relative inline visible">relative inline visible</div>
<div class="absolute inline visible">absolute inline visible</div>
<div class="fixed    inline visible">fixed    inline visible</div>

<div class="static   block visible">static   block visible</div>
<div class="relative block visible">relative block visible</div>
<div class="absolute block visible">absolute block visible</div>
<div class="fixed    block visible">fixed    block visible</div>

<div class="static   inlineblock visible">static   inlineblock visible</div>
<div class="relative inlineblock visible">relative inlineblock visible</div>
<div class="absolute inlineblock visible">absolute inlineblock visible</div>
<div class="fixed    inlineblock visible">fixed    inlineblock visible</div>

<div class="static   none visible">static   none visible</div>
<div class="relative none visible">relative none visible</div>
<div class="absolute none visible">absolute none visible</div>
<div class="fixed    none visible">fixed    none visible</div>


<div class="static   inline hidden">static   inline hidden</div>
<div class="relative inline hidden">relative inline hidden</div>
<div class="absolute inline hidden">absolute inline hidden</div>
<div class="fixed    inline hidden">fixed    inline hidden</div>

<div class="static   block hidden">static   block hidden</div>
<div class="relative block hidden">relative block hidden</div>
<div class="absolute block hidden">absolute block hidden</div>
<div class="fixed    block hidden">fixed    block hidden</div>

<div class="static   inlineblock hidden">static   inlineblock hidden</div>
<div class="relative inlineblock hidden">relative inlineblock hidden</div>
<div class="absolute inlineblock hidden">absolute inlineblock hidden</div>
<div class="fixed    inlineblock hidden">fixed    inlineblock hidden</div>

<div class="static   none...

CSS

div { border:1px solid red; background:rgba(255,0,0,0.1) }

.static      { position:static }
.relative    { position:relative }
.absolute    { position:absolute }
.fixed       { position:fixed }

.inline      { display:inline }
.block       { display:block  }
.inlineblock { display:inline-block }
.none        { display:none }

.visible     { visibility:visible }
.hidden      { visibility:hidden  }
.collapse    { visibility:collapse }

JavaScript

var hasOffsetParent = {
  self:{
    position:{ static:false, relative:false, absolute:false, fixed:false },
    display:{ inline:false, block:false, inlineblock:false, none:false },
    visibility:{ visible:false, hidden:false, collapse:false }
  },
  parent:{
    position:{ static:false, relative:false, absolute:false, fixed:false },
    display:{ inline:false, block:false, inlineblock:false, none:false },
    visibility:{ visible:false, hidden:false, collapse:false }
  }
};

var divs = document.querySelectorAll('div div');
[].forEach.call(divs,function(d){
  if (d.offsetParent){
    clear(d,'self');
    clear(d.parentElement,'parent');
  }
  function clear(el,collection){
    collection = hasOffsetParent[collection];
    var parts = el.className.split(/\s+/);
    collection.position[parts[0]] = true;
    collection.display[parts[1]] = true;
    collection.visibility[parts[2]] = true;
  }
});
for (var who in hasOffsetParent){
  for (var style in hasOffsetParent[who]){
    for (var val in hasOffsetParent[who][style]){
      if (!hasOffsetParent[who][style][val]){
        console.log("No offsetParent if "+who+".style."+style+"="+val);
      }
    }
  }
}