StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><code>z-index</code> only works on explicitly positioned elements with a <code>position</code> of <code>absolute</code>, <code>relative</code> or <code>fixed</code>.</p> <p>additionally, their 'stacking context' is relative to their position in the DOM. two sibling elements are in the same stacking context, but their children elements are in a new stacking context (so if you have two sibling parents with <code>z-index: 1</code>, and one of them has an immediate child with <code>z-index: 1</code> and the other has an immediate child with <code>z-index: 2</code>, the latter will have the higher <code>z-index</code> because its stacking context is 1-2 versus 1-1. However if for example you have two parent sibling elements where one has a higher z-index than the other, no descendant of the parent with the lower <code>z-index</code> will ever have a higher z-index than children of the parent with the higher <code>z-index</code>, even if you set the former's children to <code>z-index: 500</code> or something like that. Basically stacking contexts exist at each level of the DOM and their effects cascade to all of the lower stacking contexts generated by their descendants.</p> <p><code>z-index</code> is tricky to master and requires a lot of attention to the markup and DOM structure. you need to post all of the relevant CSS and HTML in order for us to help you.</p> <p>You can read some more about z-index on <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index" rel="nofollow">Mozilla Developer Network</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload