[CSS]モーダルと背景を固定する原理について

前提・実現したいこと

プログラミング初心者です。このような質問の形でいいのかわからないのですが、
画面中央に問い合わせフォームを固定し、その画面背景をbackground-colorで調整するという事をやっています。(正確にはログインボタン等でクリックした際にモーダルを表示、画面背景を暗くするという処理を行っています。)

以下CSS
.modal-wrapper {　　　　　　　　　　
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
}

.modal {　　　　　　　　　　　　
position: absolute;
top: 20%;
left: 34%;
background-color: #e6ecf0;
padding: 20px 0 40px;
border-radius: 10px;
width: 450px;
height: auto;
text-align: center;
}

質問点は2つあり、この書き方でどの位置に背景が固定されるのか、何故background-colorが適用されるのかの2点です。

background-colorに関しては、.modal-wrapper内で試しに
right: 0;
bottom: 0;
left: 0;
この3つを外してみた所、background-colorが適用されていませんでした。この理由も知りたいです。
よろしくお願い致します。

下記ソース修正致しました。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

HTML
1<div class="signup-modal-wrapper" id="signup-modal">
2    <div class="modal">
3      <div>
4        <i class="fa fa-2x fa-times" id="close-modal"></i>
5      </div>
6      <div id="signup-form">
7        <h2>Emailで新規登録</h2>
8        <form action="#">
9          <input class="form-control" type="text" placeholder="メールアドレス">
10          <input class="form-control" type="password" placeholder="パスワード">
11          <div id="submit-btn">新規登録</div>
12        </form>
13      </div>
14    </div>
15  </div>
16  <!-- モーダルここまで -->

CSS
1
2/*モーダル*/
3.signup-modal-wrapper {
4  position: fixed;
5  top: 0;
6  right: 0;
7  bottom: 0;
8  left: 0;
9  background-color: rgba(0, 0, 0, 0.6);
10  z-index: 100;
11  display: none;
12}
13
14.modal {
15  position: absolute;
16  top: 20%;
17  left: 34%;
18  background-color: #e6ecf0;
19  padding: 20px 0 40px;
20  border-radius: 10px;
21  width: 450px;
22  height: auto;
23  text-align: center;
24}
25
26.fa-times {
27  position: absolute;
28  top: 12px;
29  right: 12px;
30  color: rgba(128, 128, 128, 0.46);
31  cursor: pointer;
32}
33
34#signup-form {
35  width: 100%;
36}
37
38#signup-form h2 {
39  color: #5f5d60;
40  letter-spacing: 1px;
41  margin-bottom: 40px;
42}
43
44#signup-form input {
45  width: 320px;
46  margin-bottom: 20px;
47  font-size: 12px;
48  padding: 12px 12px;
49  border: 1px solid #d0d5d8;
50  border-radius: 5px;
51}
52
53#submit-btn {
54  display: inline-block;
55  padding: 14px 140px;
56  background-color: #5dca88;
57  border: none;
58  border-radius: 3px;
59  color: white;
60  margin: 10px auto;
61  cursor: pointer;
62}
63
64
65
66