Javascript 使Jquery对话框中的内容突出

我需要实现一个关闭按钮，如图所示：

但实际上，我只能做到这一点：

我是用下面的CSS风格做的。我不能使用

位置：绝对

，因为对话框的位置可能会更改

margin-right:-10px;
margin-top:-10px;

---

伙计们，你们有什么想法吗？

你们需要使用z索引和定位。最简单的方法是将close按钮div置于对话框div之外，并将对话框的z索引设置为比close按钮小的数字

这个网站对你很有用

已更新

X
窗口内容
.窗柜{
位置：相对位置；
宽度：200px；
高度：200px；
背景：#EEE；
}
.关窗{
宽度：20px；
高度：20px；
背景：#AAA；
位置：绝对位置；
顶部：0px；
右：10px；
z指数：9999；
}
.窗口内容{
宽度：200px；
高度：150像素；
背景：#AAF；
位置：绝对位置；
顶部：10px；
z指数：9998；
}

@sandeep在我的回答中给出了我应用于该图像的css代码。我正在使用jQueryUI对话框来显示它。可能有一个溢出：隐藏在你的OverlayDiv.Os中，删除it@sandeep对话框或背景覆盖的div？如答案中所述，Z索引似乎不起作用。Z索引只对定位元素（绝对、相对或固定）起作用是的，我用相对尝试过，它确实隐藏了它，我知道普通的div，只是在寻找可以在jquery ui对话框上显示角落按钮的解决方案，也许JSFIDLE或在线版本会有所帮助

<div class="window-container">
    <div class="window-close">X</div>
    <div class="window-content">window content</div>
</div>

<style>
    .window-container {
        position: relative;
        width: 200px;
        height: 200px;
        background: #EEE;
    }

    .window-close {
        width: 20px;
        height: 20px;
        background: #AAA;
        position: absolute;
        top: 0px;
        right: 10px;
        z-index: 9999;
    }

    .window-content {
        width: 200px;
        height: 150px;
        background: #AAF;
        position: absolute;
        top: 10px;
        z-index: 9998;
    }
</style>