<div class="sandbox">
  <div class="options">
    <pre>
.no1 {
  position: <select>
        <option value="static">static</option>
        <option value="relative">relative</option>
      </select>;
  z-index: 1;
}
</pre>
  </div>

  <div class="content">
    <div class="element no1">1</div>
    <div class="element no2">2</div>
  </div>

</div>

.element {
  width: 100%;
  min-width: 50px;
  height: 30px;
  opacity: 0.75;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.no2 { margin-top: -15% }

.no1 { z-index: 1; }

@media (min-width: 500px) {
  .element { height: 50vh; }
}
const select = document.querySelector('select');
const no1 = document.querySelector('.no1');

select.addEventListener('change', e => no1.style.position = select.value);

External CSS

  1. https://tim-montmorency.com/timdoc/shared/styles/codepen.css

External JavaScript

This Pen doesn't use any external JavaScript resources.