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

【问题标题】：Show child div outside the width of parent jQuery dialog div在父 jQuery 对话框 div 的宽度之外显示子 div
【发布时间】：2021-09-27 09:05:15
【问题描述】：

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

我尝试使用 z-index 和位置（对子 div 和父 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 demo

【问题讨论】：

标签： html jquery css dialog

【解决方案1】：

您可以将oveflow:visible 用于父母双方（.ui-dialog 和#parent-div）以启用子元素的可见性。

你更新后的代码是这样的

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

更新小提琴here

【讨论】：