元素错位与重叠问题：新增输入框布局异常及标签重叠解决方案咨询

我给每张图片和选择框都套了一个div，这个div采用相对定位，内部的select和label用绝对定位。新增数字输入框及其标签时，它们要么覆盖图片，要么显示在图片上方。我知道可以手动调整标签和输入框的位置，但希望实现更自然的布局。此外，标签与数字输入框存在重叠问题，用div包裹它们时，标签会覆盖输入框。目前只能像处理选择框那样通过绝对定位手动拉开两者距离，但这种方式不够自然，请问是否有其他解决方案？

现有代码 #

CSS #

div.player1Select, div.player2Select {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 400px;
    height: 400px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 10px;
    border-style: double;
    border-color: black;
    border-width: 8px;
    border-radius: 5%;
}

#player1Img, #player2Img {
    height: 400px;
    width: auto;
}

#readyButton {
    animation: color-change 2.5s infinite;
    font-size: 200%;
    font-weight: bolder;
    box-shadow: 0 0 20px 0 black;
    display: inline-block;
    position: absolute;
    left: 40%;
    right: 40%;
    bottom: 5%;
    height: 50px;
}

.player2Select { float: right; right: 20%;}

.player1Select { float: left; left: 20%;}

label { position: absolute; white-space: nowrap; align-self: flex-end; left: 24%; clear: both; }

#player1Model, #player2Model {
    position: absolute;
    align-self: flex-end;
    width: 25%;
    right: 24%;
}

.trackLength {
    float: left;
    display: inline-flex;
    position: sticky;
}

HTML #

<form>
    <div class="player1Select">
        <img src="carselect1.gif" id="player1Img" alt="car">
        <label for="player1Model">Player 1 Model: </label>
        <select id="player1Model">
            <option value="car">Car</option>
            <option value="horse">Horse</option>
            <option value="rocket">Rocket</option>
        </select>
    </div>

    <div class="player2Select">
        <img src="carselect2.gif"id="player2Img" alt="car">
        <label for="player2Model">Player 2 Model: </label>
        <select id="player2Model">
            <option value="car">Car</option>
            <option value="horse">Horse</option>
            <option value="rocket">Rocket</option>
        </select>
    </div>
    
    <div class="trackLength">
        <label for="trackInput">Track Length: </label>
        <input type="number" id="trackInput">
    </div>

    <input type="submit" value="Ready" id="readyButton" name="readyButton">
</form>

问题示例 #

核心问题是过度依赖绝对定位导致元素脱离文档流，引发重叠和布局混乱。用弹性布局（Flexbox）替代绝对定位，可实现自然的流式布局，无需手动调整坐标：

1. 重构玩家选择容器布局 #

给每个玩家容器内的标签+选择框套一个分组容器，用Flex横向排列；同时将玩家容器改为纵向Flex布局，让图片在上、选择组在下自动分布：

• 移除label和select的position: absolute设置
• 新增<div class="select-group">包裹标签与选择框，设置横向Flex并添加间距
• 修改玩家容器的flex-direction: column，用justify-content: space-between分配上下元素空间

2. 修复轨道长度输入框布局 #

移除浮动和粘性定位，给整个表单设置Flex布局，让玩家容器并排显示，轨道长度输入框自动换行到下方居中。

3. 调整按钮定位 #

移除按钮的绝对定位，让它融入表单Flex布局，自动居中在底部。

修改后的完整代码 #

CSS

/* 表单整体Flex布局，自动换行，元素间留间距 */
form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    min-height: 80vh;
}

/* 玩家选择容器改为纵向Flex，上下分布 */
div.player1Select, div.player2Select {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    padding: 0 50px 20px;
    border-style: double;
    border-color: black;
    border-width: 8px;
    border-radius: 5%;
}

#player1Img, #player2Img {
    height: 400px;
    width: auto;
}

/* 选择组横向排列，标签和选择框居中对齐并留间距 */
.select-group {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

#player1Model, #player2Model {
    width: 25%;
}

/* 轨道长度输入框居中，横向排列 */
.trackLength {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

#readyButton {
    animation: color-change 2.5s infinite;
    font-size: 200%;
    font-weight: bolder;
    box-shadow: 0 0 20px 0 black;
    height: 50px;
    padding: 0 30px;
    margin-top: 20px;
}

/* 保留颜色变化动画 */
@keyframes color-change {
    0% { background-color: #ff0000; }
    50% { background-color: #00ff00; }
    100% { background-color: #ff0000; }
}

HTML

<form>
    <div class="player1Select">
        <img src="carselect1.gif" id="player1Img" alt="car">
        <div class="select-group">
            <label for="player1Model">Player 1 Model: </label>
            <select id="player1Model">
                <option value="car">Car</option>
                <option value="horse">Horse</option>
                <option value="rocket">Rocket</option>
            </select>
        </div>
    </div>

    <div class="player2Select">
        <img src="carselect2.gif" id="player2Img" alt="car">
        <div class="select-group">
            <label for="player2Model">Player 2 Model: </label>
            <select id="player2Model">
                <option value="car">Car</option>
                <option value="horse">Horse</option>
                <option value="rocket">Rocket</option>
            </select>
        </div>
    </div>
    
    <div class="trackLength">
        <label for="trackInput">Track Length: </label>
        <input type="number" id="trackInput">
    </div>

    <input type="submit" value="Ready" id="readyButton" name="readyButton">
</form>

修改后所有元素会按流式布局自然排列，不会出现重叠，窗口大小变化时也能自适应，完全无需手动定位坐标。

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