<p>Спробуйте редагувати значення для <code>z-index</code>, щоб змінити положення елементу по осі Z:</p>

<input type="number" placeholder="auto" id="field"></input>

<div class="wrapper">
  <div class="block block-1">
    <code>z-index: auto;</code>
  </div>
  <div class="block block-2" id="block">
    <code>z-index: <strong id="newval">auto</strong>;</code>
  </div>
  <div class="block block-3">
    <code>z-index: 5;</code>
  </div>
</div>
body {
  font-family: monospace;
  font-size: 16px;
  color: #222;
  text-align: center;
  line-height: 1.5;
}

input[type=number] {
  padding: 4px;
}

.wrapper {
  position: relative;
  margin-top: 36px;
  height: 250px;
}

.block {
  background-color: #eee;
  border: 2px solid #666;
  width: 150px;
  height: 75px;
  padding-top: 26px;
  font-size: 14px;
  position: absolute;
}

strong {
  color: #252525;
}

.block-1 {
  top: 20px;
  left: 20px;
}

.block-2 {
  top: 105px;
  left: 45px;
}

.block-3 {
  top: 170px;
  left: 70px;
  z-index: 5;
}
var block = document.getElementById('block');
var newval = document.getElementById('newval');

document.getElementById('field').onchange = function() {
  block.style.zIndex = this.value;
  newval.innerHTML = this.value;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.