JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素の重なり順（z-index）を設定する方法

JavaScriptでposition指定された要素のスタック順序（重なり順）を設定するには、zIndexプロパティを使用します。このプロパティはCSSのz-indexに対応しており、値が大きいほど手前に表示され、小さいほど奥に配置されます。

zIndexプロパティの基本

zIndexプロパティは、次のように要素のstyleオブジェクトから設定できます。

element.style.zIndex = "1";

なお、z-indexが正しく機能するためには、対象要素にposition: absolute、relative、fixedなどの位置指定が設定されている必要があります。

実装例：ボタンクリックで重なり順を変更する

以下のコードでは、初期状態でz-indexが「-1」に設定された画像を、ボタンをクリックすると「1」に変更し、他の要素より手前に表示させます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: -1
         }
      </style>
   </head>
   <body>
      <img id = "myID"
         src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg"
         width = "150" height = "150">
      <button type="button" onclick="myFunction()">Set Stack Order</button>
      <p>Z-index is -1</p>
      <script>
         function myFunction() {
            document.getElementById("myID").style.zIndex = "1";
         }
      </script>
   </body>
</html>

コードの解説

  • CSS部分： #myIDセレクタで画像を絶対配置（absolute）にし、初期のz-indexを「-1」に設定しています。これにより、画像は他のコンテンツの背面に表示されます。
  • HTML部分： ボタンをクリックするとmyFunction()が呼び出される仕組みです。
  • JavaScript部分： document.getElementById("myID")で画像要素を取得し、style.zIndexに「1」を代入することで、要素を最前面に移動させています。

このように、zIndexプロパティを活用すれば、動的に要素の重なり順を制御でき、モーダルウィンドウやツールチップ、ドロップダウンメニューなど、レイヤー構造を持つUIの実装に役立ちます。

  1. JavaScriptで要素の下マージン（margin-bottom）を設定する方法

    JavaScriptで要素の下マージンを設定するには、marginBottom プロパティを使用します。このプロパティは、CSSの margin-bottom に対応しており、要素のスタイルオブジェクト（style）を通じて動的に値を変更できます。marginBottom プロパティの基本構文element.style.marginBottom = 値;値には px、%、em などの単位を付けた文字列を指定します。例えば 95px のように設定します。サンプルコード以下のコードでは、ボタンをクリックすると段落要素の下マージンが95pxに設定されます。実際にブラウザで実行して動作を確認してみてく

  2. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE