如何让Div显示在Kendo for Angular Dialog上方且无滚动条？

我来帮你搞定这个问题！你遇到的核心问题是Kendo Dialog的内部内容容器默认会裁剪超出的内容，而且自带滚动条逻辑——哪怕你给kendo-dialog标签加了overflow:visible，内部的内容区域还是会限制元素的显示范围。

下面是具体的实现步骤和修改后的代码：

关键修改点 #

Kendo Dialog的内容区域（类名为.k-dialog-content）默认设置了overflow: auto，这会导致超出容器的内容被裁剪或者触发滚动条。我们需要覆盖这个样式，让内容区域允许溢出显示。

修改后的完整组件代码 #

@Component({
  selector: 'my-app',
  template: `
    <kendo-dialog title="Kendo Dialog" [width]="400" [height]="100">
      <div id="div1">Some text in the div</div>
    </kendo-dialog>
  `,
  styles: [`
    /* 穿透Kendo组件样式，允许内容区域溢出 */
    ::ng-deep .k-dialog .k-dialog-content {
      overflow: visible !important;
    }

    #div1 {
      position: absolute;
      top: 20px;
      left: 240px;
      width: 300px;
      z-index: 99990;
      background-color: #f0f0f0;
      border: 2px solid blue;
    }
  `]
})
export class AppComponent { }

备选方案（如果禁用了::ng-deep） #

如果你的项目中不允许使用::ng-deep（Angular官方不推荐，但实际项目中仍常用），可以把样式放到全局样式文件（比如styles.css）中，这样就不需要穿透了：

/* 在全局styles.css中添加 */
.k-dialog .k-dialog-content {
  overflow: visible !important;
}

效果说明 #

• 修改后，绝对定位的#div1会以Dialog为定位基准，显示在Dialog的外部区域
• Dialog不会出现滚动条，因为内容区域的overflow被设置为visible，不再触发滚动逻辑
• 高z-index确保div显示在Dialog的上方，不会被遮挡

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