ScrollRevealを使用した際の、before要素が上に来てしまう

ScrollRevealを使用した際に、before要素が上に来ないようにする方法を探しています。
codepen上で作成したもの

ScrollRevealのtransformとtransitをnoneにするとbefore要素が下に戻るのですが、
それだとスクロールをした際のアニメーションが消えてしまいます。

また、以下のようににすれば解決するのですが、同じdiv内でできる方法があれば教えていただければと思います。

HTML
1<div class="box animation">
2</div>
3
4<script src="https://unpkg.com/scrollreveal"></script>
5   <script>
6     ScrollReveal().reveal('.animation', { 
7       duration: 2000,
8       delay: 100,
9		 distance: '50px',
10		 origin: 'bottom',
11     });
12</script>

CSS
1body {
2 margin: 20% auto;
3  width: 600px;
4  text-align:center;
5}
6.box {width: 300px;
7    background-color: #222;
8    height: 200px;
9    position: relative;
10}
11.box:before {
12    content: '';
13    display: block;
14    position: absolute;
15    top: -10px;
16    right: -10px;
17    width: 70px;
18    height: 65px;
19    background: #486ad2;
20    z-index: -3;
21    opacity: 0.9;
22}

Lhankor_Mhy

2021/03/17 01:19

難しいと思います。

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

回答1件

ベストアンサー

難しいと思います。

transform プロパティがあると、スタッキングコンテキストが生成されます。

以下のプロパティ値が none 以外の要素。

transform

重ね合わせコンテキスト - CSS: カスケーディングスタイルシート | MDN

スタッキングコンテキストがある場合、表示の重ね合わせ順は以下のようになります。

Within each stacking context, the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
the child stacking contexts with positive stack levels (least positive first).

Visual formatting model

（訳）
1. スタッキングコンテキストの背景とボーダー
2. z-index がマイナスである子スタッキングコンテキスト

つまり、スタッキングコンテキストを解消しない限り、子要素がその背景の後ろに回ることはできない、ということです。
ですから、transform: noneにすることができないのであれば、HTMLの構造を変えるか、あるいは::after疑似要素などを使って前景としてしまうか、しかないと思います。

疑似要素で追加するパターンはこんな感じです。

css
1.box {width: 300px;
2    height: 200px;
3/*    background-color: #222; 削除 */
4    position: relative;
5}
6/* 追加 */
7.box::after {
8    content: '';
9    display: block;
10    width: 300px;
11    background-color: #222;
12    height: 200px;
13}