|
Forcing html + css to cover another element when it is span and div. z-index appears to not work. All about stacking order.
philipwalton.com/articles/what-no-one-told-you-about-z-index/
I hit an annoying issue with trying to get a tooltip jquery element to always be on top, and that article showed me why. As he notes, when you have adjusted z-index and just won't work, apparently, ie, even if you give the positioned element you want z-index:1000000 it still doesn't cover an element with z index 1. That means what is happening with the document is s not what you thought. The fix in my case turned out to be a nice trick he notes, to totally pull the element you want covered OUT of the ordering on page, simply give it: z-index:-1 UPDATE: it turns out that while cosmetically correct, using z-index:-1 kills anything INSIDE the container in terms of mouse reaction, such as a link being clickable. I did a few quick tests, and found that using z-index:0 on the outer container, say, a right or left column, and then doing: float:left; z-index:1 on an inner container of the container item. z-index:0 however may be all that is required, I haven't checked yet. that puts it at the bottom no matter where it appears in the order of html on the page. This worked. :: Quote :: Stacking Order Within the Same Stacking Context
Here are the basic rules to determine stacking order within a single stacking context (from back to front): The stacking context's root element Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML) Non-positioned elements (ordered by appearance in the HTML) Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML) Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML) Note: positioned elements with negative z-indexes are ordered first within a stacking context, which means they appear behind all other elements. Because of this, it becomes possible for an element to appear behind its own parent, which is normally not possible. This will only work if the element's parent is in the same stacking context and is not the root element of that stacking context. A great example of this is Nicolas Gallagher's CSS drop-shadows without images. Global Stacking Order With a firm understanding of how/when new stacking contexts are formed as well as a grasp of the stacking order within a stacking context, figuring out where a particular element will appear in the global stacking order isn't so bad. The key to avoid getting tripped up is being able to spot when new stacking contexts are formed. If you're setting a z-index of a billion on an element and it's not moving forward in the stacking order, take a look up its ancestor tree and see if any of its parents form stacking contexts. If they do, your z-index of a billion isn't going to do you any good. And there you have it, now the tooltips are always over the floated right bar on the site in question, before, because they appeared first in the html, even with explicit z-index applied to everything, it was always under. Except, as noted, when I gave the element I wanted it to be always over z-index:0 So that's a nice trick. He also notes some stuff about opacity in terms of altering the stacking order. Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||