在 parent jQuery 对话框 div 的宽度之外显示 child div

Question

我正在使用 jQuery 对话框，我想要在对话框中定义一个额外的元素 (child div)，它看起来应该附加到对话框 (parent div).

我尝试使用 z-index 和位置（到 child 和 parent div）但是 child div 在UI 带有对话框覆盖。
如果我将 child div 放在 parent div 之外，那么它是可见的，但我不想添加逻辑将它放在parent div 因为我的 parent 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 demo

Answer 1

您可以对父元素（.ui-dialog 和 #parent-div）使用 oveflow:visible 以启用子元素的可见性。

你更新后的代码会像这样

$("#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);

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

.ui-dialog, #parent-div {overflow: visible;}

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

已更新 fiddle here

在 parent jQuery 对话框 div 的宽度之外显示 child div

Show child div outside the width of parent jQuery dialog div

html

css

jquery

dialog