我用画布创建了一个游戏，并在CSS上添加了一个边框，该边框围绕整个画布，为700px 505px，但是当游戏开始时，边框立即移至页面底部并停留在该位置。我尝试过使用position属性，但是这种情况一直在发生。 关于如何阻止它发生的任何建议？
谢谢。
body {
width: 700px;
height: 505px;
background-image: url("./images/cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: center;
}
.game-over {
position: absolute;
top: 100px;
}
#canvas {
margin-left: 315px;
}
.border {
border: 2px solid black;
width: 700px;
height: 505px;
margin-left: 315px;
margin-top: -129px;
background-position: center;
}
.waves {
background: url(./images/ondas.png) 0% 80%;
background-size: 50vw auto;
animation: moves 6s infinite linear;
min-height: 35vh;
margin: 0;
position: relative;
display: flex;
height: 224px;
width: 700px;
top: -230px;
opacity: 0.85;
}
@keyframes moves {
to {
background-position: -100vw 80%;
}
}
#startBtn {
position: absolute;
top: 250px;
left: 230px;
width: 240px;
height: 50px;
}
#startBtn {
box-shadow: 0px 0px 0px 2px #9fb4f2;
background:linear-gradient(to bottom,#7892c2 5%,#476e9e 100%);
background-color:#7892c2;
border-radius:10px;
border:1px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:12px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #283966;
}
#startBtn:hover {
background:linear-gradient(to bottom,#476e9e 5%,#7892c2 100%);
background-color:#476e9e;
}
#img {
margin-top: 60px;
margin-left: 40px;
}
#tryAgain {
position: absolute;
top: 10px;
margin-left: 50px;
left: 230px;
width: 180px;
height: 50px;
}
.elements {
margin-left: 315px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Escape the Cave</title>
<link rel="stylesheet" href="./jogo.css">
</head>
<body>
<div class="elements">
<div id="gameOver" class="game-over" style="display: none;">
<button type="button" id="tryAgain" onclick="begin()">Try Again</button>
</div>
<div class="waves" style="display: none;">
</div>
<button type="button" id="startBtn" onclick="begin()">Play the game!</button>
<div id="img">
<img src="./images/Logo.png">
</div>
</div>
<div class="border" style="display: block;"></div>
<canvas id="canvas" width="700" height="500"></canvas>
<script src="./jogo.js"></script>
<script src="./sound.js"></script>
</body>
</html>