背景画像が重なった時の対処法

背景画像を重ねるように表示した時に、
重なり順を変更したいのですが、z-indexではうまくいきませんでした。
どのように操作すれば上手くいくかご教授願いたいです。

<div class="~"　style="background: url("画像０１");">
</div>
<div class="~2" style="background: url("画像０２");margin-top:-30px;">
</div>

のような感じの時に画像01が上にくるようにしたいです。
現状は画像02が上に来てしまっています。

またdivの中にたくさん<img>タグがあるので<img>タグにしろとかは勘弁してください。

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

重なり順を変更したいのですが、z-indexではうまくいきませんでした。

質問者さんが実現したいことは、z-indexプロパティを用いることで実現することができるように思うのですが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            box-sizing: border-box;
9            margin: 0;
10            padding: 0;
11        }
12
13        .class1,
14        .class2 {
15            width: 100%;
16            height: 500px;
17        }
18
19        .class1 {
20            position: relative;
21            z-index: 5;
22            border: 5px solid #006dbf;
23        }
24
25        .class2 {
26            border: 5px solid #d43f3a;
27        }
28    </style>
29</head>
30<body>
31<div class="class1" style="background: url('https://placehold.jp/8c99fa/ffffff/150x150.png?text=image1');">
32</div>
33<div class="class2" style="background: url('https://placehold.jp/fa8c8c/ffffff/150x150.png?text=image2');margin-top:-30px;">
34</div>
35</body>
36</html>