z-indexについて

            <div class="box">
            <div class="a8"></div>
            <div class="a5"></div>
            <div class="a1"></div>
            <div class="a7"></div>
            <div class="a4"></div>
            <div class="a6"></div>
            <div class="a2"></div>
            <div class="a3"></div>
            <div class="a9"></div>
            </div>
        </div>

.box {
  margin: auto;
  height: 500px;
  width: 500px;
  position: relative;
  background-color: #ECF1F2;
}
.a8 {
  z-index: 8;
  top: 120px;
  left: 120px;
  height: 100px;
  width: 100px;
  background-color: #de70cf;
  position: absolute;
}
.a5 {
  position: absolute;
  z-index: 5;
  top: 360px;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: #9fd6d2;
}
.a1 {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 200px;
  height: 100px;
  width: 100px;
  background-color: #ffefd3;
}
.a7{
  position: absolute;
  z-index: 7;
  top: 200px;
  left: 40px;
  height: 100px;
  width: 100px;
  background-color: #deae70;
}
.a4 {
  position: absolute;
  z-index: 4;
  top: 280px;
  left: 280px;
  height: 100px;
  width: 100px;
  background-color: #8d7a5e;
}
.a6 {
  position: absolute;
  z-index: 6;
  top: 280px;
  left: 120px;
  height: 100px;
  width: 100px;
  background-color: #fffee4;
}
.a2 {
  position: absolute;
  z-index: 2;
  top: 120px;
  left: 280px;
  height: 100px;
  width: 100px;
  background-color: #7084de;
}
.a3 {
  position: absolute;
  z-index: 3;
  top: 200px;
  left: 360px;
  height: 100px;
  width: 100px;
  background-color: #d0ecea;
}
.a9 {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 100px;
  width: 100px;
  background-color: #2d69a3;
}

ここに質問したいことを詳細に書いてください
z-indexを使い8個のボックスをずらしながら重ね、最終的にわっかを作る作業をしています。
z-index: 1;の下にz-index: 8;を最後に重ねたいと思ってます。
:beforまたは:afterを使うとできると聞いたのですがサイトを見てもよくわからないので、簡単に教えて頂けないでしょうか？

kei344

2016/08/30 07:55

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

退会済みユーザー

2016/08/30 10:31

ご指摘ありがとうございます。修正しました。

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

回答2件

ベストアンサー

1つ小さい四角を作る。
重ねる四角と同じ色にして、四隅に重ねる。

とやれば、任意の四隅の重なりの見た目を変更することが出来ます。
下記では、a9の四角をa1の四角と同じ色にして隅に重ねています。

なお、positionと幅・高さの設定については一括指定する形にしています。

css
1.box {
2  margin: auto;
3  height: 500px;
4  width: 500px;
5  position: relative;
6  background-color: #ECF1F2;
7}
8
9.a1,
10.a2,
11.a3,
12.a4,
13.a5,
14.a6,
15.a7,
16.a8,
17.a9 {
18  position: absolute;
19}
20
21.a1,
22.a2,
23.a3,
24.a4,
25.a5,
26.a6,
27.a7,
28.a8 {
29  width: 100px;
30  height: 100px;
31}
32
33.a1 {
34  z-index: 1;
35  top: 40px;
36  left: 200px;
37  background-color: #ffefd3;
38}
39
40.a2 {
41  z-index: 2;
42  top: 120px;
43  left: 280px;
44  background-color: #7084de;
45}
46
47.a3 {
48  z-index: 3;
49  top: 200px;
50  left: 360px;
51  background-color: #d0ecea;
52}
53
54.a4 {
55  z-index: 4;
56  top: 280px;
57  left: 280px;
58  background-color: #8d7a5e;
59}
60
61.a5 {
62  z-index: 5;
63  top: 360px;
64  left: 200px;
65  background-color: #9fd6d2;
66}
67
68.a6 {
69  z-index: 6;
70  top: 280px;
71  left: 120px;
72  background-color: #fffee4;
73}
74
75.a7 {
76  z-index: 7;
77  top: 200px;
78  left: 40px;
79  background-color: #deae70;
80}
81
82.a8 {
83  z-index: 8;
84  top: 120px;
85  left: 120px;
86  background-color: #de70cf;
87  position: absolute;
88}
89
90.a9 {
91  top: 120px;
92  left: 200px;
93  height: 20px;
94  width: 20px;
95  z-index: 9;
96  background-color: #ffefd3;
97}

#afterを利用した例
a9を使わず、a8のafterに小さな四角形を設定する例が下記です。

css
1.box {
2  margin: auto;
3  height: 500px;
4  width: 500px;
5  position: relative;
6  background-color: #ECF1F2;
7}
8
9.a1,
10.a2,
11.a3,
12.a4,
13.a5,
14.a6,
15.a7,
16.a8,
17.a8::after,
18{
19  position: absolute;
20}
21
22.a1,
23.a2,
24.a3,
25.a4,
26.a5,
27.a6,
28.a7,
29.a8 {
30  width: 100px;
31  height: 100px;
32}
33
34.a1,
35.a8::after {
36  background-color: #ffefd3;
37}
38
39.a1 {
40  z-index: 1;
41  top: 40px;
42  left: 200px;
43}
44
45.a2 {
46  z-index: 2;
47  top: 120px;
48  left: 280px;
49  background-color: #7084de;
50}
51
52.a3 {
53  z-index: 3;
54  top: 200px;
55  left: 360px;
56  background-color: #d0ecea;
57}
58
59.a4 {
60  z-index: 4;
61  top: 280px;
62  left: 280px;
63  background-color: #8d7a5e;
64}
65
66.a5 {
67  z-index: 5;
68  top: 360px;
69  left: 200px;
70  background-color: #9fd6d2;
71}
72
73.a6 {
74  z-index: 6;
75  top: 280px;
76  left: 120px;
77  background-color: #fffee4;
78}
79
80.a7 {
81  z-index: 7;
82  top: 200px;
83  left: 40px;
84  background-color: #deae70;
85}
86
87.a8 {
88  z-index: 8;
89  top: 120px;
90  left: 120px;
91  background-color: #de70cf;
92  position: absolute;
93}
94
95.a8::after {
96  content: "";
97  top: 0;
98  left: 80px;
99  height: 20px;
100  width: 20px;
101}

投稿2016/08/31 02:24

編集2016/08/31 02:44

yamato_hikawa

総合スコア2092

z-index: 1;の下にz-index: 8;

これは無理です。
z-indexというのは数字が大きいものが上に重なります。
HTMLコードも一緒に書いてもらえると、質問者さんが何をしようとしているかもう少し伝わると思います。

投稿2016/08/30 07:15

NatsumiOki

総合スコア1298

退会済みユーザー

2016/08/30 07:19

<div> <div class="box"> <div class="a8"></div> <div class="a5"></div> <div class="a1"></div> <div class="a7"></div> <div class="a4"></div> <div class="a6"></div> <div class="a2"></div> <div class="a3"></div> <div class="a9"></div> </div> </div> 申し訳ございません！