<div class="box">
  <p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>z-index</strong>.</p>
  <p>Вона встановлює порядок розміщення елемента по осі Z. Ви можете визначити значення для кожного блоки нижче окремо.</p>
</div>

<div class="wrapper">
  <div class="block one">z-index: <input type="number" class="input" id="input1" value="1">;</div>
  <div class="block two">z-index: <input type="number" class="input" id="input2" value="2">;</div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 2px solid #666;
}

.input {
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

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

.block {
  color: #999;
	background-color: #222;
	padding: 36px;
	font-size: 1.75em;
	display: inline-block;
	position: absolute;
  z-index: 1;
}

.block.two {
  background-color: #F74C32;
	color: #444;
  z-index: 2;
  top: 3em;
  left: 3em;
}

$('.input').on('change', function() {
  var input1 = $('#input1').val();
  var input2 = $('#input2').val();
  $('.block.one').css( 'z-index', input1 );
  $('.block.two').css( 'z-index', input2 );
});