javascript - 让事情在 Jquery Dialog Overlay 中脱颖而出

Question

我需要实现如图所示的关闭按钮：

但在实践中，我只能做到这一点：

我是按照 CSS 样式完成的。我不能有，position:absolute因为对话框的位置可能会改变。

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

关于我如何实现这一目标的任何想法？

Answer 1

您需要使用 z-index 和定位。最简单的方法是将关闭按钮 div 放在对话框 div 之外，并将对话框的 z-index 设置为比关闭按钮小的数字

这个网站对你很有用http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

更新 http://jsfiddle.net/vj9Wb/

<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>