①テーブルをスクロールさせたいです。②CSSの見えない重なりを解消したいです。

実現したいこと

①テーブルをスクロール可能にしたい
②矢印ボタンを押すと、ページ遷移させたい

前提

HTMLで、テーブルに追加した言葉がランダムで表示されるものを作っています。
①「overflow: auto;」をCSSにて書いたのですが、うまく機能しません。
②矢印ボタンを押しているのに、プラスボタンを押した時の挙動になってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script><script src="classic.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/edit.css">
10    <script>
11    </script>
12</head>
13<body>
14    <div class="relation">
15     <img src="star_sky.jpg" alt="星空の画像">
16     <a href="index.html">
17         <div class="icon" button type="button"> 
18             <img src="return.svg" class="ButtonImgSize">
19         </div>
20     </a>
21         <div class="icon2" button type="button" onclick="coladd()"> 
22             <img src="plus.svg" class="ButtonImgSize2">
23         </div>
24    </div>
25    タップで編集
26<div class="table_scroll" style="overflow: auto">      
27  <table id="table" border="1">
28  </table>
29</div>
30
31    <script>
32         var table = document.getElementById("table");
33         var word = "";
34        
35        if(localStorage.getItem('words')){
36        words = JSON.parse(localStorage.getItem('words'));
37        buildTable();
38        }else{
39        coladd("おはよう");
40        }
41
42        function updateArray() {
43            var words = [];
44            var table = document.getElementById("table");
45            for(var i=0; i < table.rows.length; i++){
46                var word = table.rows[i].cells[0].textContent;
47                words.push(word);
48            }
49            localStorage.setItem('words',JSON.stringify(words));
50        }
51
52        function buildTable(){
53        var table = document.getElementById("table");
54        while (table.rows.length > 0) table.deleteRow(0);
55        // ★ローカルストレージからデータを取得
56        var localSt = localStorage.getItem('words');
57        // ★JSON形式から連想配列に変換
58        var data = JSON.parse(localSt);
59        for(var i=0; i < data.length; i++){
60        var row = table.insertRow(-1);
61        var cell1 = row.insertCell(-1);
62        var cell2 = row.insertCell(-1);
63        cell1.innerHTML = '<div contentEditable="true" oninput="updateArray()">' + data[i] + '</div>';
64        cell2.innerHTML = '<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
65          }
66        }
67
68        function coladd(word) {
69        var table = document.getElementById("table");
70        // 行を行末に追加
71        var row = table.insertRow(-1);
72        //td分追加
73        var cell1 = row.insertCell(-1);
74        var cell2 = row.insertCell(-1);
75        // セルの内容入力
76        cell1.innerHTML = '<div contentEditable="true" oninput="updateArray()">'+(word ? word : "")+'</div>';
77        cell2.innerHTML = '<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
78
79        updateArray();
80    }
81    function coldel(obj) {
82        // 削除ボタンを押下された行を取得
83        tr = obj.parentNode.parentNode;
84        // trのインデックスを取得して行を削除する
85        tr.parentNode.deleteRow(tr.sectionRowIndex);
86
87        updateArray();
88    }
89    </script>
90</body>
91</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4}
5
6img {
7  width: 100%;
8  height: 100vh;
9  background-image: url(star_sky.jpg);
10  background-size: cover;
11  background-position: center;
12}
13
14#coladd {
15
16}
17
18.ButtonImgSize {
19    width: 30px;
20    height: 30px;
21}
22
23.relation {
24    position: relative;
25}
26
27.icon {
28    width: 40px;
29    height: 40px;
30    background-color:whitesmoke;
31    display: flex;
32    justify-content: center;
33    align-items: center;
34    font-size: 1.5rem;
35    border-radius: 10%;
36    cursor: pointer;
37    
38    position: absolute;
39    top: -15px;
40    left: -323px;
41}
42
43.icon2 {
44    width: 20px;
45    height: 20px;
46    background-color:whitesmoke;
47    display: flex;
48    justify-content: center;
49    align-items: center;
50    font-size: 1.5rem;
51    border-radius: 10%;
52    cursor: pointer;
53    
54    position: absolute;
55    top: 15%;
56    left: 20px;
57}
58
59.table_scroll{
60 height: 300px;
61 overflow: auto;
62 background-color: red;
63}
64
65table {
66  position: absolute;/*絶対配置*/
67  color: white;/*文字は白に*/
68  font-size: 0.8em;/*サイズ2倍*/
69  font-family :serif, sans-serif;
70  text-align: center;
71  top: 30%;
72  left: 50%;
73  transform: translate(-50%, -50%);
74  overflow-y: scroll;
75  }
76
77  a {/*aタグを画像の真ん中に*/
78  position: absolute;
79  top: 5%;
80  left: 90%;
81  -ms-transform: translate(-50%,-50%);
82  -webkit-transform: translate(-50%,-50%);
83  transform: translate(-50%,-50%);
84  /*以下装飾*/
85  margin:0;/*余計な隙間を除く*/
86  font-size: 20px;/*文字サイズ*/
87  color: white;/*文字色*/
88  text-decoration: none;/*下線を表示させない*/
89  }

試したこと

①tableを囲った<div>の中に、「class="table_scroll" style="overflow: auto"」を入れてみる
CSSにて「.table_scroll{overflow: auto;}」を追加してみる
②<a>の位置を変える、うまく機能していた時のコードを見直す

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

自己解決

①自分で解決することができました。
ありがとうございました。

.table_scroll{
position: absolute;
z-index: 1;
overflow: scroll; /* スクロールする /
white-space: nowrap; / 自動改行しない */
width: 320px;
height: 350px;
border: 3px solid tomato;
top: 22%;
left: 25px;
}