「インセット補正包含ブロック」は《絶対配置》と組み合わせると世界の座標を書き換える最強のチートだが、なぜかこの世界では【Chrome限定】らしい。他のブラウザじゃ無力な俺が、唯一無二の英雄になるまで。

　タイトルはGeminiにつけてもらいました。あいつわかってるな。

概要

「インセット補正包含ブロック」は絶対配置やアンカーポジショニングの理解を進めるために知っておいた方がいい。

「インセット補正包含ブロック」を知っていますか

　英語だと“inset-modified containing block”です。略して“IMCB”とも呼ばれるらしいです。かっこいいですね。「インセット補正包含ブロック」は私の勝手訳ですので、この言葉が通用するかどうかはMDNでの記述次第です。
　
　さて、この概念は“CSS Positioned Layout Module Level 3”で登場しており、その名の通り「包含ブロック」をinsetプロパティで補正したあとの矩形領域です。
　ですので、inset:0;の時には「包含ブロック」と同じ領域になります。

　普段はあまり気にすることはないのですが、絶対配置やアンカーポジショニングの中でalign-selfなどをしたりするときに影響が出ます。

サンプルコード

　現在のところ、対応してるブラウザはChromeだけだと思います。たぶん。

See the Pen inset-modified containing block in absolute positioned element by lhankor_mhy (@lhankor_mhy) on CodePen.

.parent {
    position: absolute;
    width: 100px;
    height: 100px;
    place-self: center;

    background-color: pink;
}

.child {
    position: absolute;
    width: 20px;
    height: 120px;
    align-self: end;
    animation: test 3s infinite alternate linear;

    background-color: tomato;
}

@keyframes test {
    from {
        inset: -100%;
    }

    to {
        inset: 100%;
    }
}

解説

　このコードはinsetを-100%から100%にアニメーションしているだけですが、途中でぴょこたんと跳ねているのが見えるかと思います。これはalign-self: end;による配置が「インセット補正包含ブロック」の影響を受けているためです。
　おおざっぱに言うと、以下のように解決されています。

• insetが負の場合、「インセット補正包含ブロック」が「包含ブロック」より大きくなるため、「インセット補正包含ブロック」を基準になるべくalign-self: end;で配置している。
• insetが正の場合、「インセット補正包含ブロック」が「包含ブロック」より小さくなるため、「包含ブロック」を基準になるべくalign-self: end;で配置している。

　つまり、align-self: end;の基準が途中で変わっているので、そのタイミングでぴょこたんと跳ねるのですね。

参考

3.5.1. Resolvings Insets for the “Inset-Modified Containing Block” | CSS Positioned Layout Module Level 3
4.4. Overflow Alignment: the safe and unsafe keywords and scroll safety limits | CSS Box Alignment Module Level 3