下拉列表中的复选框重叠答案

【问题标题】：Checkbox overlap in dropdown下拉列表中的复选框重叠
【发布时间】：2020-11-19 14:35:54
【问题描述】：

第一行我有下拉菜单。

第二行我有切换复选框。

当我打开下拉切换复选框重叠下拉。

如何避免。立即响应会有所帮助

    <div class="flex-row--margin-10 flex-columns ${isFromPendingProjects ?'':'display-column'}">         
        <div class="${isFromPendingProjects ?'flex-row__col-34':'menu-column'}">
            <io-dropdown value.bind="lobId" change.delegate="enableDisableCreateBtn()" class="${isFromPendingProjects ?'width-95':'width-100'}">
                <io-input type="text" placeholder="Line of Business" class="width-100" value.bind="lobText"></io-input>
                <io-dropdown-item repeat.for="option of iLOBs" value.bind="option.LobId">${option.LobName}</io-dropdown-item>
            </io-dropdown>
        </div>
    </div>
            <br />
    <div class="${isFromPendingProjects ?'flex-row__col-34':'menu-column'}" style="width:100%">
        <div>
            <span style="font-size:16px">Administrative Claims Data</span>
            <span class="highlight-text">
                <img src="../images/info.svg" data-toggle="tooltip" data-placement="right"
                     i18n="[title]projectDetail.tooltipIntegrateClaimsData" style="margin-top:-4px" />
            </span>
            <label class="switch switch-color" style="width:45px; display: inline">
                <input type="checkbox" checked.bind="IntegrateClaimsData" change.delegate="enableDisableCreateBtn()" />
                <span class="toggleSlider round" style="margin-top:-5px;"></span>
            </label>
        </div>
    </div>

【问题讨论】：

在您的问题中包含您的代码。
您好，添加了代码。请检查
我的问题中还添加了屏幕截图。请检查并尽快回复

标签： css aurelia

【解决方案1】：

您应该将 z-index css 属性添加到下拉列表中以解决此问题。您在此处显示的代码有限，但查看可用数据，添加 z-index: 1;到复选框和z-index：2；到下拉部分应该可以解决问题。

【讨论】：