CODEWITHSUNDEEP
cssjquery-uioverlayz-indexmodal-dialog
Twinone
Twinone

Reputation: 3029

JQuery UI limiting overlay z-index

I have a dialog in jQuery UI which is a modal dialog:

$("#mydialog").dialog({modal:true});

I have another div which I want to be ontop of the overlay, however, this div is created before the dialog, and other modal dialogs may be showing up too.

What I want is basically like a "always on top" for that div.

This jsfiddle explains it better.

Upvotes: 1

Views: 1324

Answers (1)

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

You need to add position: relative to your div, so it gets out of the normal page flow and respects the z-index property, see my updated fiddle

#mydiv {
    z-index: 1500;
    width: 100px;
    height: 100px;
    background:white;
    float:right;
    position:relative;
}

Rationale: z-index property only has effect on positioned elements, so you need one of these:

position: relative;
position: absolute;
position: fixed;

Upvotes: 1

Related Questions