Question

I have a requirement to achieve a close button as seen in this picture:

But in practice I am able to achieve only this:

I did it with following CSS style. I can’t have the position:absolute since the location of the dialog may change.

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

Any Ideas guys on how could I achieve this?

Answer 1

You need to use z-index and positioning. The simplest way to do this is to have the close button div outside the dialog div and set the z-index of the dialog to a lower number than close button

This web can be useful to you http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

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