scroll-marker疑似要素の重なり順を指定したい

実現したいこと

scroll-marker疑似要素の重なり順が効きません。z-indexが効かないです。

前提

・scroll-marker疑似要素には、z軸（とx軸とy軸）にtranslateがかかっており、scroll-marker-group疑似要素にはperspectiveがかかっています。
・もちろん、z-indexを付ける際はpositionをstatic以外にしている。

発生している問題

z-indexによる重なり順も、z軸のtranslateも、重なり順に反映されず、scroll-marker疑似要素の親要素の記述順が遅いほど上にくる

該当のソースコード

編集して一部抜粋

HTML
1<div class="carousel">
2                    <div class="caption">ここにカルーセルがあります</div>
3                    <ul class="slide-wrapper" style="--all-carousel-count: 11; --current-carousel-index: 0;">
4                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 0;">
5                            <dl>
6                                <dt>名前</dt>
7                                <dd>
8                                    <div class="img-container">
9                                        <img src="./assets/imgs/img.png" alt="画像の説明">
10                                    </div>
11                                    <ul>
12                                        <li>誕生日…2077/3/18</li>
13                                        <li>人種…サイボーグ</li>
14                                        <li>性格…やさしい</li>
15                                    </ul>
16                                </dd>
17                            </dl>
18                        </li>
19                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 1;">
20                            <dl>
21                                <dt>名前</dt>
22                                <dd>
23                                    <div class="img-container">
24                                        <img src="./assets/imgs/img.png" alt="画像の説明">
25                                    </div>
26                                    <ul>
27                                        <li>誕生日…2077/3/18</li>
28                                        <li>人種…サイボーグ</li>
29                                        <li>性格…やさしい</li>
30                                    </ul>
31                                </dd>
32                            </dl>
33                        </li>
34                        <li class="slide" style="--img: url(../assets/imgs/img.png); --carousel-index: 2;">
35                            <dl>
36                                <dt>名前</dt>
37                                <dd>
38                                    <div class="img-container">
39                                        <img src="./assets/imgs/img.png" alt="画像の説明">
40                                    </div>
41                                    <ul>
42                                        <li>誕生日…2077/3/18</li>
43                                        <li>人種…サイボーグ</li>
44                                        <li>性格…やさしい</li>
45                                    </ul>
46                                </dd>
47                            </dl>
48                        </li>
49                    </ul>
50                </div>

CSS
1.carousel {
2    overflow: clip;
3
4    >.caption {
5        position: absolute;
6        top: 50%;
7        left: 50%;
8        translate: -50% -50%;
9    }
10
11    .slide-wrapper {
12        display: flex;
13        overflow-x: scroll;
14        overflow-y: clip;
15        scroll-behavior: smooth;
16        scroll-snap-type: x mandatory;
17        scrollbar-width: none;
18        -ms-overflow-style: none;
19        scroll-marker-group: before;
20
21        &::scroll-marker-group {
22            position: absolute;
23            display: flex;
24            height: 5px;
25            gap: 1em;
26            place-content: center;
27        }
28
29        &::scroll-button(right),
30        &::scroll-button(left) {
31            content: "";
32            position: absolute;
33            cursor: pointer;
34            transition-duration: 0.3s;
35        }
36
37        &::-webkit-scrollbar {
38            display: none;
39        }
40
41        .slide {
42            flex-shrink: 0;
43            scroll-snap-align: center;
44            scroll-snap-stop: always;
45            container-type: scroll-state;
46
47            &::scroll-marker {
48                content: "";
49                background-color: var(--gray);
50                border-radius: 50%;
51                width: 12px;
52                height: 12px;
53                border-width: 0;
54                border-color: var(--bright-cyan-clay);
55                border-style: solid;
56                box-sizing: border-box;
57                transition-duration: 0.3s;
58            }
59
60            &::scroll-marker:target-current {
61                border-width: 1px;
62                background-color: var(--cyan-clay);
63            }
64        }
65    }
66}
67
68.carousel {
69            width: 430px;
70            margin: auto;
71
72            .slide-wrapper {
73                &::scroll-marker-group {
74                    bottom: calc(100% - 180px);
75                    left: calc(50% + 430px + 90px);
76                    translate: -50%;
77                    perspective: 200px;
78                }
79
80                &::scroll-button(*) {
81                    bottom: 123px;
82                    width: 80px;
83                    height: 60px;
84                    background-color: var(--bright-cyan-clay);
85                    background-image: url(../assets/imgs/矢印三角白.png);
86                    background-position: center;
87                    background-repeat: no-repeat;
88                    border-radius: 15px;
89                }
90
91                &::scroll-button(right) {
92                    right: calc(30% - 430px - 90px);
93                }
94
95                &::scroll-button(left) {
96                    left: calc(30% + 430px + 90px);
97                    scale: -1 1;
98                }
99
100                &::scroll-button(right):hover {
101                    scale: 1.1;
102                }
103
104                &::scroll-button(left):hover {
105                    scale: -1.1 1.1;
106                }
107
108                &::scroll-button(right):active,
109                &::scroll-button(left):active {
110                    translate: 0 5px;
111                }
112
113                &::scroll-button(right):disabled,
114                &::scroll-button(left):disabled {
115                    background-color: var(--gray);
116                }
117
118                .slide {
119                    position: relative;
120                    width: 430px;
121                    height: 630px;
122
123                    &::scroll-marker {
124                        position: absolute;
125                        top: 0;
126                        left: -95px;
127                        z-index: calc( var(--all-carousel-count) - abs( var(--current-carousel-index) - var(--carousel-index)));
128                        display: block;
129                        background-image: var(--img);
130                        background-position: center;
131                        background-repeat: no-repeat;
132                        background-size: cover;
133                        height: 190px;
134                        width: 190px;
135                        border-radius: unset;
136                        border: 5px solid var(--cyan-clay);
137                        background-color: unset;
138                        translate: calc(-200px * cos((360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) + 90deg)) calc(150px * cos(360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) - 100px) calc(150px * sin((360deg / var(--all-carousel-count) * (var(--carousel-index) - var(--current-carousel-index))) + 90deg) + -150px);
139                    }
140
141                    >dl {
142                        >dt {
143                            font-size: 24px;
144                            text-align: center;
145                            position: relative;
146                            z-index: 2;
147                            width: 418px;
148                            padding: 6px 0;
149                            margin: 0 auto 16px;
150                            background-color: var(--cyan-clay);
151                            border-radius: 10px;
152                        }
153
154                        dd {
155                            font-size: 22px;
156                            width: 100%;
157
158                            .img-container {
159                                aspect-ratio: 1;
160                                width: 400px;
161                                margin: 0 auto 20px;
162                            }
163
164                            ul {
165                                width: 400px;
166                                margin: auto;
167                                padding-left: 1em;
168
169                                li {
170                                    list-style-type: disc;
171                                    list-style-position: outside;
172                                }
173                            }
174                        }
175                    }
176                }
177            }
178        }

注釈

すみません　文字数ギリギリなので以下省略します。ご質問ください。JavaScriptもあります。

Lhankor_Mhy

2025/06/20 06:43

abs() CSS関数はChrome未対応ですが、ターゲットにしているブラウザは何ですか？ https://developer.mozilla.org/ja/docs/Web/CSS/abs

Lhankor_Mhy

2025/06/20 06:52

developer trial なしで導入されるんですね。24日リリース。 https://chromestatus.com/feature/5091423843778560 https://chromiumdash.appspot.com/schedule

Bonnacon

2025/06/20 07:59

この前はどうもお世話になりました！そうです。ターゲットブラウザはChromeです. 慌てて今Can I useでも調べてみたんですが、まさかChromeで使えないCSS関数があるなんて......。その可能性をすっかり見落としてました。２４日にまた追加で報告を行いたいです。有益な情報をどうもありがとうございます！

Bonnacon

2025/06/25 01:50

ありがとうございます！　Chromeの更新が来ないなぁと思い今日手動で更新いたしましたところ、absCSS関数が効くようになりました。よろしければ回答してもらえると助かります！

Lhankor_Mhy

2025/06/25 23:54

ご解決されて何よりです。お手数おかけしますが、自己解決でご対応いただけますと幸いです。

Bonnacon

2025/06/26 04:24

すみません　なんか申し訳ないです　ありがとうございます

Lhankor_Mhy

2025/06/26 07:03

そんなことないですよ。私は、質問された方が自己解決することが回答者としてベストだと思っているので。