移动端HTML输入框穿透maxOrders div 媒体查询修复咨询

核心问题原因：原有#topBar设置了固定高度30px，移动端触发Sim模式显示#simulatorControls时，内部内容超出容器高度导致溢出，和下方#maxOrders区域重叠；同时浮动布局的按钮在容器高度变化时定位容易偏移。

以下是可直接替换的CSS代码，无需修改原有HTML结构：

/* 基础样式修改 */
#topBar {
    /* 替换固定高度为最小高度，支持内容自动撑开 */
    min-height: 30px;
    margin-top: 10px;
    /* 相对定位作为绝对定位按钮的锚点 */
    position: relative;
    overflow: hidden;
}

#btnToggleAgent {
    /* 去掉浮动改用绝对定位，永久固定在右上角 */
    position: absolute;
    right: 0;
    top: 0;
    height: 30px;
    min-width: 60px;
    width: 70px;
    border-radius: 10px;
    font-size: 18px;
    color: white;
}

#comboBoxAgent {
    /* 预留按钮宽度空间，避免挤压其他元素 */
    max-width: calc(100% - 80px);
    width: 400px;
    height: 30px;
}

#comboBoxCoin1, #comboBoxCoin2, #toggleSwitch {
    height: 30px;
    display: inline-block;
}

#simulatorControls {
    display: none;
    padding: 8px 0;
}

/* 原有1100px断点逻辑保留 */
@media only screen and (max-width: 1100px) {
    #comboBoxCoin2 {
        display: none;
    }
}

/* 新增移动端适配断点，阈值可根据实际需求调整 */
@media only screen and (max-width: 768px) {
    #comboBoxAgent {
        width: 150px;
    }
    /* 模拟器控制区移动端独占一行 */
    #simulatorControls {
        width: 100%;
        margin-top: 8px;
    }
    #txtStartDateTime {
        margin-left: 0;
        max-width: calc(100% - 120px);
    }
}

/* 以下原有样式保持不变 */
#comboBoxCoin1 {
    min-width: 60px;
}

#comboBoxCoin2 {
    min-width: 60px;
}

.txtOrderRadioBtn {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

#maxOrdersBtn {
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

#maxOrders {
    padding: 5px 0px;
}

.simulator-progress {
    font-weight: bold;
}

效果说明 #

• #btnToggleAgent通过绝对定位锚定在#topBar右上角，不会随内部内容变化偏移，满足固定右上角的要求
• #topBar改为最小高度后，#simulatorControls显示时会自动撑开容器高度，#maxOrders自然排在容器下方，不会出现重叠穿透问题

内容的提问来源于stack exchange，提问作者A. Vreeswijk