将按钮相对定位在 canvas 上方会切断大部分 canvas

Question

我正在尝试使用 JS、HTML 和 CSS 制作游戏，其中我使用 HTML 打开 bag/inventory 菜单。但是，当我尝试将我的按钮定位到游戏屏幕的右下角 (canvas) 时，canvas 的大部分被切断，使其无法播放。

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

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 定位会在按钮位置产生错误，因此我正在尝试寻找一种解决方案，使按钮始终位于 canvas.

Answer 1

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

.container {

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

}

将按钮相对定位在 canvas 上方会切断大部分 canvas

Relatively positioning button over canvas cuts off majority of canvas

html

css

position

canvas

button