Relative z-index?

Question

I've got a "Dialog" widget that pops up with a z-index of 100. When I create another popup (a floating div), it appears underneath the dialog widget, because I haven't explicitly set the z-index on the new popup.

The structure ends up looking something like

<div id="dialogbox" style="z-index: 100">
    <div>
        <div id="widgetThatCausesThePopup" />
    </div>
</div>
<div id="popupHiddenBehindTheDialog" />

I'm using GWT to generate this HTML. There can be arbitrary levels of nesting between dialogbox and widgetThatCausesThePopup, and the actual z-index may be arbitrary as well.

How can I ensure that the new div will be shown in front of the dialogbox?

Sure, I'd love to do something like `z-index: {z-index-of-parent + 1}`, but since the parent doesn't have a z-index set I don't know how to find the index to beat! — Riley Lark, Apr 11 '11 at 21:04
Every time you add a popup, you could increment a variable. Then, use JavaScript to change the recent popup's z-index to 100+inc. I don't know if there's a CSS solution, though... — Azmisov, Apr 11 '11 at 22:14
No, I don't think there's a CSS solution - this is definitely a dynamic situation. I'm hoping I can determine the z-index to use from the DOM, though, and not have to manage an increment variable myself. Good idea, though - I'll fall back to that if I can't read it off the DOM. — Riley Lark, Apr 11 '11 at 22:48

score 3 · Answer 1 · answered Apr 12 '11 at 14:20

3

If your new dialog windows are inserted in the DOM after the previous ones:

You can set the z-index: 100 on all dialog windows. When elements with the same z-index are found, order in the DOM determines which is on top.

answered Apr 12 '11 at 14:20

peteorpeter

4,037
2
29
47

Thanks for the tip. Unfortunately this only works for a known z-index (I realize I wrote the question poorly and de-emphasized the variability of the z-index, sorry). – Riley Lark Apr 12 '11 at 14:27
Ok, I see. Do you have an _approximate_ idea of the z-index of the first dialog? You could add a few zeroes to that number and set it as your z-index for the dialogs you add. Z-index values can go pretty high and still work: http://www.puidokas.com/max-z-index/. – peteorpeter Apr 12 '11 at 16:24

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Get the computed z-index of the parent (see In GWT how to know all the styles applied to a given element (by id or class name)) and increment it for each child.

edited May 23 '17 at 12:13

Community

1
1

answered Apr 12 '11 at 14:12

z00bs

7,518
4
34
53

Chris Lercher · Accepted Answer · 2011-04-12T18:32:32.873

The natural CSS solution is to:

Make sure, that "dialogbox" gets a stacking context. This can be done by
- setting z-index to something else than auto,
- and additionally position to either relative, absolute or fixed.
Then add your popup as a child to "dialogbox". If it isn't yet, you can always move it in the DOM.

In that case, your popup doesn't need a z-index at all. This completely avoids the "z-index hell".

Example:

<!doctype html>
<html>
<head>
<style type="text/css">
    #dialogbox {
        width: 400px; height: 300px;
        top: 0; left: 0;
        background-color: red;
    }
    #popup {
        width: 500px; height: 200px;
        top: 0; left: 0;
        background-color: green;
    }
</style>
</head>

<body>
<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div>
        <div id="widgetThatCausesThePopup" >
            <button>Show popup</button>
        </div>
    </div>
    <div id="popup" style="position: absolute;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
</div>
</body>
</html>

The stacking context even allows you to use z-indexes relative to the context, if you need them (note, that the child order doesn't matter, and the z-indexes don't have to be larger than 100):

<div id="dialogbox" style="z-index: 100; position: absolute;">
    <div id="popup" style="position: absolute; z-index: 2;">
        <!-- Empty divs cause really weird problems. 
             Always make sure, that your divs aren't empty! -->
        &nbsp;
    </div>
    <div>
        <div id="widgetThatCausesThePopup" style="position: absolute; z-index: 1;">
            <button>Show popup</button>
        </div>
    </div>
</div>

Relative z-index?

3 Answers3

Linked