How to use z-index to position pop-ups in front of all elements in a sheet?

I'm trying to include hover-over pop-ups in my character sheet, to contain details that would otherwise clutter things up.&nbsp; They appear whenever a player hovers over one of the "ankh" icons:&nbsp; &nbsp; &nbsp;--&gt;&nbsp;&nbsp; My CSS uses z-index to ensure the pop-ups appear on top of the other elements, which usually works: &nbsp;&nbsp;&nbsp;&nbsp; . charsheet input . sheet-hoverpopup + span + div { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left : calc ( ( -10% ) / 2 ) ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bottom : 20px ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height : 190px !important ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width : 150% ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display : none ; (changed to "block" by a :hover pseudo-class elsewhere) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position : absolute ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background : url (" <a href="https://imgur.com/kBl8aTO.jpg" rel="nofollow">https://imgur.com/kBl8aTO.jpg</a> "); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-size : 100% ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border : 3px white outset ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index : 250 ; &nbsp;&nbsp;&nbsp;&nbsp; } My problem arises when I have multiple columns of fieldset rows.&nbsp; Unfortunately, it seems z-index is only able to position elements within a column --- no matter how high I set the z-index, my popups refuse to cover up elements in a previous column: I've scoured the Internet, but I can't quite figure out the right search terms to pull up the answers I'm looking for.&nbsp; Anyone have any advice or insight on how to guarantee my popups stay above the rest of my sheet?&nbsp; Thanks in advance!

Do the other elements have positioning and z-index set as well?

Yes, as far as I can tell from the topmost div elements all the way down to the inputs and spans; position is set as well for everything.&nbsp; No matter how high I crank up the z-index on the popup, items in other columns continue to appear over it. Does the type of position matter?&nbsp; I.e. does position: absolute appear behind position: relative, regardless of z-index?

I'm just a hack. ;-P but I would have a quick read here; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index</a> When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): The background and borders of the root element Descendant non-positioned blocks, in order of appearance in the HTML Descendant positioned elements, in order of appearance in the HTML <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index</a> When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero). If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context</a> The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements, because only certain elements create stacking contexts. We can say that elements that do not create their own stacking contexts are assimilated by the parent stacking context. You also might try applying a negative value to the elements that are floating above your hover text.

Thanks, I will check that out!&nbsp; From the parts you quoted, I think my original assumption was right --- because the rows in each column are isolated within their own column divs, it may not be possible for a child of one parent element to have a higher effective z-index than a child of a different parent element, since the z-sorting of the parent elements overrides whatever the children are doing.&nbsp; &nbsp;(Okay, that sentence made more sense in my head, I admit.) Edited to Add:&nbsp; Wait, your first quote might contain the answer to my problem!&nbsp; If I just remove the position declarations from the non-pop-up divs, then the positioned pop-ups should (according to that quote) appear in front of the non-positioned elements.&nbsp; I'll give it a try and report back!

That did indeed fix my problem!&nbsp; Thanks a ton for posting, hack or not! ;)

Ryan said: That did indeed fix my problem!&nbsp; Vince does that a lot.