如何让jQuery Dialog父容器内的子div超出父宽度后正常显示

问题原因 #

1. jQuery UI Dialog 初始化时会自动将你的#parent-div包裹进自带的DOM结构中，其中内容区域默认开启overflow: hidden，你设置了left: -20px的子元素超出父容器范围，直接被裁剪隐藏。
2. #parent-div未设置相对定位，绝对定位的子元素会向上寻找第一个有定位属性的祖先元素作为定位基准，位置逻辑不符合预期。

解决代码 #

CSS修改

/* 父容器设置相对定位，作为子元素的定位基准 */
#parent-div {
  position: relative;
}

/* 子元素样式，保留原有配置，新增z-index确保层级正常 */
#child-div{
  height: 20px;
  width: 20px;   
  left: -20px;
  top: 20px; /* 可根据需要调整垂直位置 */
  position: absolute;
  background-color: #000;
  z-index: 10;
}

/* 关闭当前Dialog内容区域的溢出裁剪，避免超出的子元素被隐藏 */
#parent-div.ui-dialog-content {
  overflow: visible !important;
}

JavaScript修改

$("#parent-div").dialog({
  title: 'Parent',
  width: parseInt(100, 10), // 修正原parseInt第二个参数的错误写法
  height: parseInt(190, 10),
  modal: true,
  buttons: [
    {
      text: "Save",
      click: function () {
        $(this).dialog("close");
      }
    }
  ]
});
// 追加子元素到父容器，用jQuery写法更简洁
$("#parent-div").append($("#child-div"));

HTML代码（无需修改）

<div id="parent-div"></div>
<div id="child-div"></div>

修改后子元素会依附在Dialog左侧显示，无需额外监听父容器尺寸变化调整位置，也不会被遮罩层遮挡。

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