カードの重ね方について

あるサイトで紹介されているカードを重ねて回転させるコードがあるのですが、CSSに「position: relative;」があります。
個人的には必要ないように感じます。

なぜ「position: relative;」が必要なのでしょうか？
以下にコードを載せます。
ご教授頂ければ幸いです。

CSS
1コードbody {
2  background: #3498db;
3  font-family: Arial, sans-serif;
4  font-size: 16px;
5  font-weight: bold;
6}
7
8.card {
9  cursor: pointer;
10  width: 50px;
11  height: 70px;
12  transition: 0.8s;
13  position: relative;
14}
15
16.card-front,
17.card-back {
18  width: 100%;
19  height: 100%;
20  text-align: center;
21  line-height: 70px;
22  border-radius: 8px;
23  position: absolute;
24  top: 0;
25  left: 0;
26}
27
28.card-back {
29  background: #f1c40f;
30  color: #fff;
31}
32
33.card-front {
34  background: #fff;
35  color: #f1c40f;
36  transform: rotateY(180deg);
37}
38
39.card:active {
40  transform: rotateY(180deg);
41}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Memory Game</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div class="card">
10    <div class="card-front">1</div>
11    <div class="card-back">?</div>
12  </div>
13</body>
14</html>

m.ts10806

2018/09/27 14:16

なぜ「必要ない」と感じられたのでしょうか？

GoGobuchiking

2018/09/27 14:23

position:relativeを削除してもうまく動いたからです。

m.ts10806

2018/09/27 14:24

ミニマムコードだけで要不要は判断できませんよ。

GoGobuchiking

2018/09/27 14:31

コードが長くなれば動かなくなる可能性があるんですか？

m.ts10806

2018/09/27 14:37

実際はこれだけで使うわけではないですよね？、あくまで最低限実現するためのものです。指定自体が存在しないものとかスペルミスではないので「動かなくなる」ことはありませんが、親子関係や組み方、他の指定の影響などで元の挙動を維持できなくなる可能性は十分にあります。つまり、必要だから入っている。という認識です。削除して本当に元の挙動を維持できているかは本来の作者ではない質問者さんには判断できないことではないでしょうか。おそらく無償で公開されているものなので何かあっても自己責任で、ということだとは思いますが