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