How can I show child element above parent element AND siblings of the parent element?

Question

My question is related to this question:

Show child element above parent element using CSS

The response for that question, to set overflow: visible

Answer 1

position: relative for an element creates a new positioning context. Child elements of this element are positioned in this local context. They cannot leave this context. If you want to position child elements above siblings of its parent element, you should set z-index for its parent element to a higher value than z-index of its siblings.

If the effective z-index position of the element relatively to its siblings solely depends on their DOM-tree order, then moving the element to position after all its siblings in DOM tree (if semantically appropriate) could help as well.

Note that you can always change z-index dynamically via JavaScript (just, in terms of Unobtrusive JS, don’t forget to provide a reasonable pure-CSS alternative so that content wasn’t hidden if JS is disabled).