画布上的相对定位按钮会切断大部分画布答案

【问题标题】：Relatively positioning button over canvas cuts off majority of canvas画布上的相对定位按钮会切断大部分画布
【发布时间】：2021-07-19 01:23:52
【问题描述】：

我正在尝试使用 JS、HTML 和 CSS 制作一个游戏，其中我使用 HTML 打开包/库存菜单。但是，当尝试将我的按钮放置在游戏屏幕（画布）的右下方时，画布的大部分被切断，使其无法播放。

这是我看到的，下面是我的代码。

function setup() {

    game = new Game;
    player = new Player;
    controller = new Controller;
    canvas.width = 800;
    canvas.height = 600;

}

@font-face { font-family: "04b_03"; src: url("assets/fonts/04B_03__.TTF"); }

:root {

    --background: 15, 15, 15;
    --outline: 255, 160, 30;

}

html, body {

    /* Prevent scrollbars */
    overflow: hidden;

    /* Background */
    background-color: rgb(var(--background));

    /* Text */
    font-family: "04b_03", sans-serif;
    /* font-family: "Staatliches", cursive; */
    font-size: 200%;
    color: white;

}

.container {

    position: relative;
    width: auto;
    height: auto;

}

canvas {

    /* Center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Border */
    border: 10px solid white;
    border-radius: 25px;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);

    /* Rendering */
    image-rendering: pixelated;

    /* Positioning */
    z-index: 1;

}

.bag {

    position: absolute;
    right: 5%;
    bottom: 5%;
    z-index: 2;

}

<body>

        FIRE

        <div class = "container">

                <canvas id = "canvas"> Your browser does not support the HTML canvas :( </canvas>

                <button class = "bag"> Bag </button>

        </div>

    </body>

我该如何解决这个问题？每当我使用relative 定位时，容器都会缩小，但我不相信还有其他方法可以做到这一点。如果最终最终用户决定缩放他们的屏幕，使用absolute 定位将在按钮位置产生错误，因此我正在尝试寻找一种解决方案，使按钮始终保持在画布上的同一位置。

【问题讨论】：

标签： html css button canvas position

【解决方案1】：

没关系，我让它工作了。我在容器 CSS 上使用了固定定位。这里是：

.container {

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

【讨论】：