Relative z-index? | 易学教程

问题

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?

回答1:

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>

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/5627507/relative-z-index

标签

html

css

gwt

layout

z-index