<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];
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.