親要素に対してabsoluteかつsickyのように配置したいです。

Question

こちらにもコードを記載していますが、以下のcontentをouterの底辺に固定したいです。
現状position: absolute;なのでスクロールするとそれに合わせてcontentもスクロールされますが、底辺に固定、position: stickyのような挙動にしたいです。ただし、stickyにするとcontentは以下画像の様にcontent2の下に配置されるかと思います。これをそうではなくabsoluteのようにouterより表に配置するような感じ、常に画像２枚目の様になっていてほしいです。

色々試しても上手くいかずもし実装方法思いつく方いましたらご教示いただけると大変助かります。

<div class="outer">
  <div class="content2"> test</div>
  <div class="content"></div>
</div>

.outer {
  position: relative;
  background: green;
  width: 1000px;
  height: 300px;
  overflow: scroll;
}

.content {
  position: absolute;
  background: rgba(0, 0, 255, 0.428);
  width: 50px;
  height: 20px;
  bottom: 0;
  right: 50%;
}

.content2 {
  background: pink;
  width: 100%;
  height: 1000px;
  border: solid 2px black;
  top: 0%;
}

Answer 1

content2 にネガティブマージンを設定して、content と重なるようにすればどうでしょう。

.content {
  position: sticky; /* 変更 */
  background: rgba(0, 0, 255, 0.428);
  width: 50px;
  height: 20px;
  bottom: 0;
  left: 50%; /* 変更 */
}

.content2 {
  background: pink;
  width: 100%;
  height: 1000px;
  border: solid 2px black;
  margin-bottom: -20px;  /* 追加 */
}

Comments

[Hayato1201]

確かにそれでいけますね！ありがとうございます助かりました！