親要素に対してfixed top or bottomにしたいです。

こちらにもコードを載せているのですが、以下contentを親のouterに対してfixedにしたいです。
現状下にスクロールするとそれに合わせてスクロールされてしまいますが親の位置で固定したいという感じです。position fixedでなくても希望の動作になるのであればそれでも良いのですが何か良い方法ご存知の方、ご教示いただけますと大変助かります。

css
1.outer {
2  position: relative;
3  background: green;
4  width: 1000px;
5  height: 300px;
6  overflow: scroll;
7}
8
9.content {
10  position: absolute;
11  background: rgba(0, 0, 255, 0.428);
12  width: 100%;
13  height: 100%;
14  top: 0%;
15}
16
17.content2 {
18  background: pink;
19  width: 100%;
20  height: 1000px;
21  top: 0%;
22}

html
1<div class="outer">
2  <div class="content"></div>
3  <div class="content2"> test</div>
4</div>

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

回答1件

ベストアンサー

position: sticky; で親の範囲内で固定できると思いますが。

確認しやすいように、サイズ変更して境界線もつけてみました。

css
1.content {
2  position: sticky;
3  background: rgba(0, 0, 255, 0.428);
4  width: 96%;
5  height: 96%;
6  border: solid 2px red;
7  top: 0;
8  left: 2%;
9  z-index: 1;
10}