<form id="form">
  <p>Вибрати тип позиціонування:</p>
  <label><input type="radio" value="static" name="radio">static</label>
  <label><input type="radio" value="absolute" name="radio">absolute</label>
  <label><input type="radio" value="relative" name="radio">relative</label>
  <label><input type="radio" value="sticky" name="radio">sticky</label>
  <label><input type="radio" value="fixed" name="radio">fixed</label>
</form>

<hr>
<p id="text"></p>
<hr>

<div class="wrapper">
  <div id="block">
    <code>top: 25px;</code>
    <br>
    <code>left: 40px;</code>
  </div>
</div>

body {
  font-family: sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

input[type=radio] {
  margin-right: 8px;
}

label {
/*   display: block; */
/*   margin-bottom: 10px; */
}

.wrapper {
  position: relative;
  min-height: 1050px;
}

#block {
  border: 4px solid #666;
  padding: 36px 16px;
  max-width: 175px;
  text-align: center;
}

#text {
  line-height: 1.75;
}

window.onload = function() {
  
  var textArray = {static: 'Елементи відображаються як зазвичай',
                   absolute: 'Видаляє елемент з загального потоку',
                   relative: 'Положення елемента встановлюється відносно його поточного положення',
                   sticky: 'Елемент розглядається як відносно позиційований і прокручується разом з вмістом сторінки до тих під, поки він не перетинає певний поріг, після чого він стає фіксованим(тільки у найновіших браузерах)',
                   fixed: 'Позиціонує елемент відносно вікна браузера, а не документа та не змінює свого положення при прокручуванні веб-сторінки'};
  
  var radioBtns = document.getElementsByName('radio');
  var block = document.getElementById('block');
  var result = null;
  var text = document.getElementById('text');
  
  document.getElementById('form').onchange = function() {
    for (var i = 0; i < radioBtns.length; i++) {
      if (radioBtns[i].checked) {
        result = radioBtns[i].value;
      }
    }
    block.style.position = result;
    block.style.top = '250px';
    block.style.left = '40px';
    text.innerHTML = textArray[result];
  }
  
}