下拉框中的复选框重叠

Question

在此处输入图像描述

第一行我有下拉列表。

第二行我有切换复选框。

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

如何避免。立即响应将有助于

<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>

Answer 1

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