親要素を起点として子要素を固定表示するCSS

HTMLの要素を固定して表示するCSSというと position:fixed を使うのが便利だけれども配置するための起点が画面全体(ビューポート)になってしまって親要素を起点として子要素を固定することができないんだ。 例えば スクロールボックス 内にボタンを固定して表示したい場合にどうするか。 考えると二つの方法がCSSで可能で、 親要素と子要素の一組をさらに別の要素に入れてボックス化した場合 とそうではなくて 親要素と子要素の一組だけの場合 が可能なので、それぞれのマークアップを紹介する。 親要素と子要素をボックス化した場合のCSS 親要素と子要素の一組をさらにdiv要素などで囲ってボックス化して親要素と一体化したボックスの祖先要素(親の親)を起点として子要素を固定表示すると。画面上、親要素の中に固定表示するのと同じ結果になる。 position:relativeとabsoluteの固定表示のマークアップ サンプ…