CSS　重なり順序を指定する

kobato

8年前

このページのもくじ

背景画像を複数重ねるなら

CSS3 より、要素に複数の背景を適用できるようになりました。
複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、指定した順に重ねて描画されます。

複数の背景は、各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。
この方法は、ショートハンドプロパティの background でも、個別のプロパティ（※background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size）のどちらでも利用可能です。

＜サンプルコード＞

.myclass {
background: 背景1, 背景2, ..., 背景N;
}

参考：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

ボックスの重なりは「z-index」

z-index は、ボックスの重なりの順序を指定するプロパティです。
この指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効となります。

position プロパティで使える値をおさらい。

static	配置方法を指定しない
relative	相対位置への配置
absolute	絶対位置への配置
fixed	スクロールしても固定される絶対配置

z-index　プロパティは下記のとおり。

z-index	auto	親要素と同じ階層にする（初期値）
z-index	数値	値が大きいものほど手前（前面）に表示される。（0が基準）

＜サンプルコード＞

<style>
div {
width: 200px;
height: 100px;
position: absolute;
}

div.example1 {
z-index: 2;
background-color: #85b9e9;
top: 100px;
left: 50px;
}

div.example2 {
z-index: 3;
background-color: #ffd78c;
top: 150px;
left: 200px;
}

div.example3 {
z-index: 1;
background-color: #bde9ba;
top: 50px;
left: 150px;
}

</style>

</head>
<body>

<div class="example1">ボックス1</div>
<div class="example2">ボックス2</div>
<div class="example3">ボックス3</div>

</body>
</html>