<style>
.ex { position: absolute; width: 90px; height: 90px; padding: 5px; color: white; border: 2px black solid; }
</style>
<div style="position:relative; height:210px; ">
<div id="red" class="ex" style="z-index: 100; left: 60px; top: 30px; background-color: red;">R (100)</div>
<div id="green" class="ex" style="z-index: 200; left: 90px; top: 60px; background-color: green;">G (200)</div>
<div id="blue" class="ex" style="z-index: 300; left: 30px; top: 90px; background-color: blue;">B (300)</div>
<div class="ex" style="z-index: 100; left: 260px; top: 30px; background-color: red;">R (100)</div>
<div class="ex" style="z-index: 300; left: 290px; top: 60px; background-color: green;">G (300)</div>
<div class="ex" style="z-index: 200; left: 230px; top: 90px; background-color: blue;">B (200)</div>
</div>
R (100)
G (200)
B (300)
R (100)
G (300)
B (200)
R：
G：
B：
<script>
/**
* z-index 変更
* @param {HTMLSelectElement} ctrl コントロール
* @param {string} id コントロールのid
* @param {string} mark タイトルのマーク
*/
function changeZindex(ctrl, id, mark) {
var elm = document.getElementById(id);
elm.style.zIndex = ctrl.value;
var title = mark + " (" + ctrl.value + ")";
elm.innerHTML = title;
}
</script>
R：<select onchange='changeZindex(this, "red", "R");'>
<option selected>100
<option>200
<option>300
</select>
G：<select onchange='changeZindex(this, "green", "G");'>
<option>100
<option selected>200
<option>300
</select>
B：<select onchange='changeZindex(this, "blue", "B");'>
<option>100
<option>200
<option selected>300
</select>