z-index【Zオーダー】

メモ 構文 例 (動的変更)

メモ

構文 (※記述方法)

プロパティ値
z-index: auto【自動】 | 《integer【整数】》

例

<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>