css - 超出最大宽度的无法点击的内容

Question

我在 Vue 中创建了一个日期选择器组件，我试图在标准的 Bootstrap 列布局中使用它。问题在于，当列小于日期选择器的选择窗口时，div 之外的任何区域都不可点击。所以在下图中，无法选择最右侧列中的所有日期。

加宽包装 div 确实允许点击内容，所以我知道这与日期选择器溢出超过包装 div 最大宽度设置的边界有关。

有没有办法仍然实现图像中的视觉效果，但允许在溢出到包装器外部的元素上检测到用户交互？

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 576px){
.col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
}}

.datepicker {
width: 300px;
}

<div data-v-44ab1ae6="" class="row">
<div data-v-44ab1ae6="" class="col-sm-3 col-12">
<div class="datepicker"></div>
</div>
</div>

Answer 1

将 position: relative 和 z-index 应用于日期选择器 div 应将 div 置于其他内容之上，同时保持溢出内容可点击。

我使用 bootstrap-vue 作为标记，但最终结果应该是相同的，因为它们都使用相同的 bootstrap CSS。

演示: https://codepen.io/Hiws/pen/zgRmOV