HTML中按钮无法置于Canvas内，位于Canvas上方容器区域求助

你的核心问题是Canvas无法直接包含子元素（它属于替换元素，和<img>类似），所以按钮和文本只能通过定位叠加在Canvas上方，而非真正意义上的“内部”。另外代码里还有几个关键缺陷导致布局混乱：

代码里的核心缺陷 #

• .container的transform: scale (3)存在语法错误，scale和括号之间不能有空格，正确写法是scale(3)
• 未给html、body设置高度，导致.container的height:50%无法生效，容器高度塌陷
• .btn的height:200%会让按钮高度异常膨胀，超出容器范围
• .btn-grid的gap:60px过大，配合minmax(200px,1fr)在缩放后的容器里会导致按钮溢出
• Canvas用position:absolute脱离正常流后，正常流的按钮/文本会默认排在容器顶部，和Canvas上下分离

修复后的完整代码 #

HTML（仅调整层级逻辑，无需大改） #

<body>
    <div class="container">
        <canvas class="game-canvas"></canvas>
        <!-- 新增容器，统一控制文本和按钮的位置 -->
        <div class="canvas-content">
            <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>
    </div>
</body>

CSS（修复定位、高度、布局问题） #

/* 给根元素设置高度，确保百分比高度生效 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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;
    /* 修复scale语法错误 */
    transform: scale(3) translateY(0);
    /* 防止内部元素溢出容器 */
    overflow: hidden;
}

.game-canvas {
    background-color: antiquewhite;
    /* 让Canvas占满容器高度 */
    height: 100%;
    width: 100%;
    border-top: 4px solid black;
}

/* 让文本和按钮叠加在Canvas上方 */
.canvas-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 缩小gap避免溢出 */
    gap: 10px;
    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%，让按钮自适应内容 */
    height: auto;
}

.btn:hover {
    border-color: black;
}

关键修改说明 #

1. 给html/body设置高度：确保.container的百分比高度能正确计算，同时用flex布局让容器居中
2. 修复transform语法错误：去掉scale和括号之间的空格，避免缩放失效
3. 新增.canvas-content容器：通过绝对定位让文本和按钮叠加在Canvas上方，实现“在Canvas内部”的视觉效果
4. 调整按钮布局参数：缩小gap，去掉无效的height:200%，避免按钮溢出容器
5. 设置overflow:hidden：防止容器内元素超出边界

内容的提问来源于stack exchange，提问作者Peuyela