如何让子元素突破父元素overflow:hidden限制 实现日历跨天事件连续条效果

问题根本原因 #

你的.dayBox容器设置了overflow: hidden，事件.event的::after伪元素属于容器内部元素，超出容器内容区的部分会被直接裁剪，所以永远无法覆盖到相邻容器的边框。

可行实现方案 #

我们通过给跨天事件加专属标记、临时放开对应日容器的溢出限制、调整层级的方式实现，仅对跨天事件生效，不影响普通单日事件：

修改点说明 #

1. 给.dayBox默认添加相对定位和基础层级，方便内部元素层级控制
2. 新增跨天事件专属类.multi-day，仅针对这类事件生成覆盖边框的伪元素
3. 新增.allow-overflow类，给包含跨天事件的日容器临时放开溢出限制，避免伪元素被裁剪
4. 调整伪元素的位置和层级，确保能覆盖相邻容器的边框

完整可运行代码 #

<script type='text/javascript' src='https://code.jquery.com/jquery-latest.min.js'></script>
<style>
.dayBox {
    display: inline-block; 
    width: 111px; 
    border: 4px solid #bcbcbc;
    margin-left: -4px; 
    margin-bottom: -4px; 
    background: #FFF; 
    vertical-align: top; 
    white-space: nowrap; 
    text-align: left; 
    overflow: hidden; 
    /* 新增：基础定位和层级 */
    position: relative;
    z-index: 1;
}
/* 新增：包含跨天事件的容器放开溢出限制 */
.dayBox.allow-overflow {
    overflow: visible;
}
.event {
    position: relative; 
    background: #99ffda; 
    width: 100%;
    z-index: 2;
}
/* 仅跨天事件生成覆盖边框的伪元素 */
.event.multi-day::after {
    content: ''; 
    position: absolute; 
    /* 宽度刚好覆盖左右两个4px边框的重叠区域 */
    width: 8px; 
    height: 100%; 
    right: -6px; 
    top: 0;
    background: #99ffda;
    /* 层级比普通日容器高，确保能盖住边框 */
    z-index: 3;
}
</style>
<div id='boxAllEvents' class='boxAllEvents'></div>
<script>
buildMonthDivs = ''; 
for (i=0; i<3; i++) {
    // 给第0、1个日容器加跨天事件示例，第2个是普通单日事件
    const isMultiDay = i < 2;
    const dayBoxClass = isMultiDay ? 'dayBox allow-overflow' : 'dayBox';
    const eventClass = isMultiDay ? 'event multi-day' : 'event';
    buildMonthDivs += `<div id="day${i}" class="${dayBoxClass}"><div class="${eventClass}">sample text</div></div>`;
}
$('#boxAllEvents').html(buildMonthDivs);
</script>

效果说明 #

上述代码中前两个容器的事件属于跨天事件，中间的边框会被伪元素完全覆盖，呈现连续效果；第三个容器是普通单日事件，不会有边框遮盖效果，符合需求。

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