position:sticky が効かなかった

起こったこと

HTMLの<nav> と　<aside> を固定したかった為、CSSでposition:stickyを設定したがうまく効かなかった。

調べたところ、以下の回答を見つけた。

the problem you are facing here is, that your section block consumes the full height. so it won't stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped your 'hi' inside a div.

翻訳

ここで直面している問題は、セクションブロックが高さ全体を消費することです。大きすぎてくっつかないので、くっつきません。それを機能させるには、セクション内に子要素を配置し、それにスティッキー属性を与える必要があります。あなたの例に基づいて、私は単にあなたの 'hi'をdivの中に包みました。

対処法

<nav> と　<aside>に各々子要素を配置したところ、うまく機能した。

style.css

<nav>
      <div class="navigation">
      ...中略
      </div>
</nav>

style.css

<aside>
      <div class="asideContainer">
      ...中略
      </div>
</aside>

参考サイト