cssでリストを固定できない。

リストを固定させたいのですが、fixedで固定しようとしたらすべて画面から映らなくなります。
スクロールしてもリストの位置を固定されたままにしたいです。
解決方法あれば教えてください。
参考にした動画　https://youtu.be/ArTVfdHOB-M
動画で作られたものを固定化したいです。

該当のソースコード

html
1 <nav class="navigation">
2        <ul  id="page-link">
3            <li class="list active">
4                <a href="#">
5                    <span class="icon"><ion-icon name="chatbox-ellipses-outline"></ion-icon></span>
6                    <span class="text">ストーリー</span>
7                </a>
8            </li>
9            <li class="list">
10                <a href="#">
11                    <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
12                    <span class="text">キャラクター＆声優</span>
13                </a>
14            </li>
15            <li class="list">
16                <a href="#">
17                    <span class="icon"><ion-icon name="glasses-outline"></ion-icon></span>
18                    <span class="text">見どころ</span>
19                </a>
20            </li>
21            <div class="indicator"></div>
22        </ul>
23    </nav>

css
1:root{
2  --clr: #fff;
3}
4.navigation{
5  position: relative;
6  width: 270px;
7  height: 70px;
8  background:turquoise;
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  border-radius: 10px;
13  margin-left: auto;
14}
15.navigation ul{
16  position: relative;
17  display: flex;
18  width: 210px;
19}
20.navigation ul li{
21  position: relative;
22  list-style: none;
23  width: 70px;
24  height: 70px;
25  z-index: 1;
26}
27.navigation ul li a{
28  position: relative;
29  display: flex;
30  justify-content: center;
31  align-items: center;
32  flex-direction: column;
33  width: 100%;
34  text-align: center;
35  font-weight: 500;
36}
37.navigation ul li a .icon{
38  position: relative;
39  display: block;
40  line-height: 75px;
41  font-size: 1.5em;
42  text-align: center;
43  transition: 0.5s;
44  color: var(--clr);
45}
46.navigation ul li.active a .icon{
47  transform: translateY(-32px);
48}
49.navigation ul li a .text{
50  position: absolute;
51  color: var(--clr);
52  font-weight: 400;
53  font-size: 0.75em;
54  letter-spacing: 0.05em;
55  transition: 0.5s;
56  opacity: 0;
57  transform: translateY(20px);
58}
59.navigation ul li.active a .text{
60  opacity: 1;
61  transform: translateY(10px);
62}
63.indicator{
64  position: absolute;
65  top: -52%;
66  width: 68px;
67  height: 68px;
68  background: #29fd53;
69  border-radius: 50%;
70  border: 6px solid var(--clr);
71  transition: 0.5s;
72}
73.indicator::before{
74  content: '';
75  position: absolute;
76  top: 50%;
77  left:-22px;
78  width: 20px;
79  height: 20px;
80  background: transparent;
81  border-top-right-radius: 20px;
82  box-shadow: 1px -10px 0 0 var(--clr);
83}
84.indicator::after{
85  content: '';
86  position: absolute;
87  top: 50%;
88  right:-22px;
89  width: 20px;
90  height: 20px;
91  background: transparent;
92  border-top-left-radius: 20px;
93  box-shadow: -1px -10px 0 0 var(--clr);
94}
95.navigation ul li:nth-child(1).active ~ .indicator{
96  transform: translateX(calc(70px*0));
97}
98.navigation ul li:nth-child(2).active ~ .indicator{
99  transform: translateX(calc(70px*1));
100}
101.navigation ul li:nth-child(3).active ~ .indicator{
102  transform: translateX(calc(70px*2));
103}

試したこと

親要素をfixedに変えたらすべて消える。

recal

2021/12/20 12:13 編集

ここで言う親要素ってどこから見た親のことですか？つまりどれを親って言ってますか？ liの親のpage-linkか ulの親のnavigationか提示されている要素navigationの質問者が知らない親要素か。

recal

2021/12/20 12:23 編集

また提示されたソースはナビゲーション部分だけですが、コンテンツ部分を含めた全体の構造はどうなっているのか教えてください。

takamaru_28

2021/12/20 13:14

ulの親のnavigationのことです。映画紹介のサイトで、リストの下にはリストにある3つのコンテンツが順に並んでいます。それぞれの見出しとリストを繋いで終わりです。

takamaru_28

2021/12/20 13:26

リストの上は背景画像があるくらいです

recal

2021/12/20 13:32

質問は修正出来るのでそのソースを追加して問題を再現できるようにしてください。また問題が発生する環境も補足してください。どのOSのどこからどこまでのブラウザで確認しましたか？

takamaru_28

2021/12/20 13:43

Windows10 visual studio codeで書いたプログラムを chromeで確認しています

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

回答1件

navigationしかわからないのでコンテンツ枠を勝手に追加しました。

html
1<div id="container">
2  <nav class="navigation">
3  (略)
4  </div>
5  <main>(略)</main>
6</div>

css
1.navigation {
2  position: fixed;/*fixedに変更*/
3  right: 0;/*追加*/
4  width: 270px;
5  height: 70px;
6  background: turquoise;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10  border-radius: 10px;
11  /*   margin-left: auto; */
12}
13
14/* 勝手に追加した要素 */
15#container {
16  position: relative;
17}
18#contents {
19  height: 3000px;
20  background: tomato;
21}
22