布局与z-index属性问题求助：游戏界面开发遇阻

核心问题点 #

• 你给#space设置了背景图，但又在这个div里插入了<img>标签，这个img会直接覆盖背景图，导致看不到平铺效果；而且#space没设置宽高，默认只包裹内容高度，背景图自然没法铺满页面。
• #runner img用了background-repeat: repeat-x，但<img>标签本身是加载单张图片，这个属性对img标签无效，应该把runner的背景图设置在父div#runner上，而非img标签。
• z-index属性只有在元素设置了position（非static）时才生效，你的#runner img没设置position，z-index等于白写。

修改后的代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>Game Interface</title>
    <style type="text/css">
        /* 重置默认边距，避免页面留白 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 让body占满整个视口 */
        body {
            min-height: 100vh;
        }
        #space {
            background-color: #000;
            background-image: url(interface/star_bg.jpg);
            background-repeat: repeat;
            position: relative;
            z-index: -1;
            /* 设置宽高占满父容器（body） */
            width: 100%;
            min-height: 100vh;
        }
        #runner {
            background-color: #003;
            background-image: url(interface/runner_bg.jpg);
            background-repeat: repeat-x;
            background-position: center;
            position: relative;
            z-index: 0;
            /* 让runner水平居中 */
            margin: 0 auto;
            /* 设置runner的高度，背景图会横向重复填充 */
            height: 564px;
            width: 100%;
        }
        /* 后续的布局容器，z-index设为1 */
        #layout-container {
            position: relative;
            z-index: 1;
            /* 根据需求添加样式 */
            color: #fff;
            text-align: center;
            margin-top: -564px; /* 或者用绝对定位来叠在runner上方 */
        }
    </style>
</head>
<body>
    <div class="background" id="space"></div>
    <div class="runner" id="runner"></div>
    <!-- 细分布局容器 -->
    <div id="layout-container">
        <!-- 这里放你的游戏界面元素 -->
    </div>
</body>
</html>

关键修改说明 #

• 删掉#space里的<img>标签，让div的背景图正常显示，同时给#space设置width:100%和min-height:100vh，确保铺满整个页面。
• 把runner的背景图移到#runnerdiv上，去掉内部<img>标签，设置height让背景图能显示，repeat-x就能横向重复，再用margin:0 auto实现水平居中。
• 给需要设置z-index的元素都加上position:relative，保证层级生效。
• 新增布局容器示例，设置z-index为1，你可以根据需求调整它的定位方式（比如绝对定位）。

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