[ HTML CSS ] 文字や画像を重ねて表示する ( position: absolute, z-index )

Pocket

ここでは、スタイルを使用して、文字を重ねて表示するサンプルを掲載しています。もちろん、重ねて表示できるのは文字だけではありません。画像などでも重ねて表示することができます。

スポンサーリンク

文字を重ねて表示するサンプル
<html>
  <body>
    <span style="position: absolute; z-index: 100; top: 100px; backgroud-color: yellow;">手前に表示される</span>
    
    <span style="position: absolute; z-index: 50; top: 105px; backgroud-color: gray;">こっちは・・・・・・・・・・・・・・・・奥に表示される</span>       
  </body>
</html>

ブラウザ表示結果

z-indexが大きいほど手前に表示される

z-index が大きいほど手前に表示される

スタイルに position: absolute; を指定すると、span タグの表示位置を body タグの左上を原点とする x 軸, y 軸の絶対値で設定することができるます。これで、文字を重ねて表示することができるようになります。サンプルでは top によって上からそれぞれ、100px, 105px の位置に表示するように設定しています。

次に、z 軸を z-index によって設定することが出来ます。値が大きいほど画面手前に表示されます。サンプルでは 2つの span タグを重ねていますが、3つ以上も重ねて表示することが出来ます。

ユーザー操作の無効化

例えば、z-index の大きな div タグを画面全体に配置すると、その他の要素の操作はできなくなります。このことを利用して、時間の掛かる処理が終わるまで、ユーザー操作を無効とするといった使用方法があります。

スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>