在父jQuery对话框div的宽度之外显示子div

我正在使用 jQuery 对话框，我想要在对话框中定义一个额外的元素（子 div），它应该看起来像是附加到对话框（父 div）。

• 我尝试使用 z-index 和 position（到子和父 div），但是子 div 在带有对话框覆盖的 UI 中不可见。
• 如果我将子 div 放在父 div 之外，那么它是可见的，但我不想添加逻辑将它放在父 div 旁边，因为我的父 div 大小是动态的。

HTML

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

Javascript/jQuery

$("#parent-div").dialog({
                    title: 'Parent',
                    width: parseInt(100, 100),
                    height: parseInt(190, 10),
                    modal: true,
                    buttons: [
                                {
                                    text: "Save",
                                    click: function () {
                                        $(this).dialog("close");
                                    }
                                }
                    ]
                });
var childdiv = document.getElementById("child-div");
document.getElementById("parent-div").appendChild(childdiv);

CSS

#child-div{
    height:20px;
    width: 20px;   
    left: -20px;
    position: absolute;
    background-color: #000;
}

jsfiddle 演示