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

CSSのz-indexプロパティを使って要素を重ねて表示する方法

CSSのz-indexプロパティとは

CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。

注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。

また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効になる点にも留意してください。

例1：負のz-indexによる重ね合わせ

それでは、z-indexプロパティの具体的な使用例を見てみましょう。以下のコードでは、2つのdiv要素にそれぞれ異なる負のz-index値を設定し、テキストとの重なり順を確認しています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div{
    margin: auto;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
}
div:first-child {
    background-color: orange;
    width: 270px;
    height: 120px;
    z-index: -2;
}
div:last-child {
    width: 250px;
    height: 100px;
    z-index: -1;
    background-color: turquoise;
}
</style>
</head>
<body>
<div></div>
<p>Fortranは1957年、IBMの開発チームによって科学計算のために最初に開発されました...................</p>
<div>
</div>
</body>
</html>

出力結果

上記コードの出力は以下の通りです。

CSSのz-indexプロパティを使って要素を重ねて表示する方法

例2：背景画像とボックスシャドウを組み合わせた装飾

続いて、もう一つのサンプルを見てみましょう。この例では、段落要素に背景画像を設定し、box-shadowで影を付けることで、要素に視覚的な奥行きを持たせています。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    background: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 3px black;
    padding: 20px;
    background-origin: border-box;
}
</style>
</head>
<h2>デモ</h2>
<body>
<p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。
これはデモ用のテキストです。</p>
</body>
</html>

出力結果

上記コードの出力は以下の通りです。

CSSのz-indexプロパティを使って要素を重ねて表示する方法

  1. CSSのz-indexプロパティを使って要素をレイヤー状に重ねる方法

    CSSのz-indexプロパティを使用すると、開発者は複数の要素を互いに重ねて表示できます。z-indexには正の値も負の値も指定可能です。 z-indexの基本ルール 注意：重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 それでは、z-indexプロパティの具体的な使用例を見ていきましょう。 例1：背景画像とボックスシャドウの重ね合わせ 以下の例では、段落要素に対して背景画像・パディング・ボックスシャドウを設定し、要素がどのように重なって表示されるかを確認できます。 <!DOCTYPE html> <

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負