親にz-indexが指定されている場合の重なり方の変更方法について

こちらにも例を載せているのですが、以下の様に互いに重なりあったdivがあり、pinkのみをblackより表側に配置したい場合、z-indexを大きくしたところで親であるwhiteにz-indexが指定されているためblackより表に移動させることができないです。それぞれの親子関係を変更せずにpinkをblackより前面に移動させることは可能でしょうか？？

もしお分かりの方いましたらご教示いただけますと助かります!!

html
1<div class="frame" >
2  
3  <div class="content" >
4    <div class="white">
5      <div class="pink">        
6      </div>
7    </div>
8    <div class="black">
9      <div class="grey">        
10      </div>
11    </div>
12  </div>
13  
14</div>

css
1.frame {
2  background: green;
3  height: 400px;
4  width: 900px;
5  position:relative;
6}
7
8.content {
9  background: blue;
10  height: 300px;
11  width: 500px;
12  position:relative;
13}
14
15.white {
16  position: absolute;
17  top: 20%;
18  left: 10%;
19  background: white;
20  height: 200px;
21  width: 300px;
22  z-index:100;
23}
24
25.pink {
26  position: absolute;
27  top: 20%;
28  left: 10%;
29  background: pink;
30  height: 200px;
31  width: 300px;
32/*   z-index:1000; ←効かない*/
33}
34
35.black {
36  position: absolute;
37  top: 20%;
38  left: 30%;
39  background: black;
40  height: 200px;
41  width: 300px;
42  z-index:101;
43}
44
45.grey {
46  position: absolute;
47  top: 20%;
48  left: 10%;
49  background: grey;
50  height: 200px;
51  width: 300px;
52}

hatena19

2022/09/08 14:02

pinkがblackの前面、grayの背面とということでしょうか。

Hayato1201

2022/09/08 14:12

はいそうです！ただgrayの背面かどうかは正直どちらでも良いかもという感じですね。

hatena19

2022/09/08 14:23

回答しましたので、ご参照ください。

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

回答1件

ベストアンサー

z-indexでは親子関係を乗り越えて移動できないので、
transform: translateZでZ方向の移動をさせたらどうでしょう。

css
1.frame {
2  background: green;
3  height: 400px;
4  width: 900px;
5  position:relative;
6}
7
8.content {
9  background: blue;
10  height: 300px;
11  width: 500px;
12  position:relative;
13  transform-style: preserve-3d;
14}
15
16.white {
17  position: absolute;
18  top: 20%;
19  left: 10%;
20  background: white;
21  height: 200px;
22  width: 300px;
23  transform-style: preserve-3d;
24}
25
26.pink {
27  position: absolute;
28  top: 20%;
29  left: 10%;
30  background: pink;
31  height: 200px;
32  width: 300px;
33  transform: perspective(none) translateZ(1px);
34}
35
36.black {
37  position: absolute;
38  top: 20%;
39  left: 30%;
40  background: black;
41  height: 200px;
42  width: 300px;
43  transform: perspective(none) translateZ(0px);
44  transform-style: preserve-3d;
45}
46
47.grey {
48  position: absolute;
49  top: 20%;
50  left: 10%;
51  background: grey;
52  height: 200px;
53  width: 300px;
54  transform: perspective(none) translateZ(2px);
55}