javascript - Jquery ダイアログ オーバーレイで目立たせる

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>