JSFiddle - React, Tailwind, and code Playground

HTML

<h1>inline</h1>
<ul>
  <li><span class="element inline static"></span></li>
  <li><span class="element inline relative"></span></li>
  <li><span class="element inline absolute"></span></li>
  <li><span class="element inline fixed"></span></li>
  <li><span class="element inline sticky"></span></li>
</ul>
<h1>block</h1>
<ul>
  <li><span class="element block static"></span></li>
  <li><span class="element block relative"></span></li>
  <li><span class="element block absolute"></span></li>
  <li><span class="element block fixed"></span></li>
  <li><span class="element block sticky"></span></li>
</ul>
<h1>inline-flex</h1>
<ul>
  <li><span class="element inline-flex static"></span></li>
  <li><span class="element inline-flex relative"></span></li>
  <li><span class="element inline-flex absolute"></span></li>
  <li><span class="element inline-flex fixed"></span></li>
  <li><span class="element inline-flex sticky"></span></li>
</ul>
<h1>flex</h1>
<ul>
  <li><span class="element flex static"></span></li>
  <li><span class="element flex relative"></span></li>
  <li><span class="element flex absolute"></span></li>
  <li><span class="element flex fixed"></span></li>
  <li><span class="element flex sticky"></span></li>
</ul>

CSS

.inline {
  display: inline;
}

.block {
  display: block;
}

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: auto;
  bottom: auto;
}

JavaScript

const elements = Array.from(document.getElementsByClassName('element'));

elements.forEach(element => {
  const styles = window.getComputedStyle(element);
  element.innerText = `position: ${styles.position}; display: ${styles.display}`;
});