我正在使用javascript, CSS和HTML。js中没有太多动作。问题是按钮没有出现在画布中——相反，它出现在容器中。它就在我的画布上方。此外，我是一个业余爱好者，所以我确信有很多错误是我没有意识到的，所以任何对代码缺陷的批评都将非常感谢。我不认为js对代码有影响，但即使有影响，我也不会注意到。这是代码:
html:
<body>
<div class="container">
<canvas class="game-canvas"></canvas>
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
css:
.container {
position: relative;
width: 50%;
height: 50%;
max-width: 80%;
max-height: 80%;
outline: 1px solid #333;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
font-size: 20px;
transform: scale (3) translateY(50%);
}
.game-canvas {
background-color: antiquewhite;
height: 170px;
position:absolute;
bottom: 0;
width: 100%;
border-top: 4px black solid;
}
.btn-grid {
padding: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(200px, 1fr));
gap: 60px;
margin-top: 20px;
}
.btn {
background-color: hsl(200, 100%, 50%);
border: 1px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
height: 200%;
}
.btn:hover {
border-color: black;
}
我试着搞乱css代码，虽然对我来说它没有做太多改变按钮的一般位置。但在html中，当我尝试切换代码时，有时按钮就消失了。其他时候，它会完全流出容器。我太害怕碰javascript代码，但我不认为它影响了按钮的位置，因为它只是弹出窗口，我仍然可以点击按钮。我觉得不是因为画布脱落了吧?因为我把按钮放在一个封闭的画布下面。我也试着在谷歌上寻求帮助，并在这个网站上搜索了类似的问题，但我找不到任何可以帮助我的。
只要在.game-canvas元素中将position: absoulute改为position: inherit，在.btn-grid元素中添加position: absolute就可以解决这个问题了
.container {
position: relative;
width: 50%;
height: 50%;
max-width: 80%;
max-height: 80%;
outline: 1px solid #333;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
font-size: 20px;
transform: scale (3) translateY(50%);
}
.game-canvas {
background-color: antiquewhite;
height: 170px;
position: inherit;
bottom: 0;
width: 100%;
border-top: 4px black solid;
}
.btn-grid {
padding: 10px;
display: grid;
position: absolute;
grid-template-columns: repeat(2, minmax(200px, 1fr));
gap: 60px;
margin-top: 20px;
}
.btn {
background-color: hsl(200, 100%, 50%);
border: 1px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
height: 200%;
}
.btn:hover {
border-color: black;
}<body>
<div class="container">
<canvas class="game-canvas"></canvas>
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>