通常

重なり順は.before > .afterになる。

.before-wrapper
.before
position: relative;
z-index: 200;
.after
position: absolute;
z-index: 100;

opacity

.beforeの代わりに親要素の.before-wrapperが比較対象になるため、.before < .afterになる。

.before-wrapper
opacity: 0.9;
.before
position: relative;
z-index: 200;
.after
position: absolute;
z-index: 100;

opacity + z-index

.before-wrapperにz-indexが効くようになったわけではないので、.before < .afterのまま。

.before-wrapper
opacity: 0.9;
z-index: 300;
.before
position: relative;
z-index: 200;
.after
position: absolute;
z-index: 100;

transform

opacityと同じく、親要素の.before-wrapperが比較対象になるため、.before < .afterになる。

.before-wrapper
transform: translate(0);
.before
position: relative;
z-index: 200;
.after
position: absolute;
z-index: 100;

filter

opacityと同じく、親要素の.before-wrapperが比較対象になるため、.before < .afterになる。

.before-wrapper
filter: blur(0px);
.before
position: relative;
z-index: 200;
.after
position: absolute;
z-index: 100;