When an element is given an opacity
, all static and relative children of the element are rendered with partial transparency. However, elements with position: absolute
(or position: fixed
) do not inherit this, and are instead rendered at full opacity unless specifically told otherwise.
Now, I could replace assignments to style.opacity
with a call to a function that performs the assignment, then loops through all children, getting their computed style and seeing if their position property warrants the addition of its own style.opacity
... but that's a bit of a nuke.
I also know that I could add opacity: inherit
to the appropriate elements, but this only works if they are direct children of the faded element - what if they're descendants?
I'd like to know if there is a way to force elements to inherit the correct transparency.
Side-note: IE performs the way I want when I use filter:alpha(...)
, interestingly enough.
Solution with the CSS position property ¶ It is possible to set absolute positioning of a child element relative to the parent container. For that, you must specify the position property with its “relative” value on the parent element.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent, which means it bubbles up the DOM until it finds a relative context to apply the positioning.
Inherit positioning explicitly sets the value to that of the parent (if the parent is position:absolute, the child will be position:absolute; if the parent is position:fixed, the child will be position:fixed ). Static positioning is the default.
When an element is given an opacity, all static and relative children of the element are rendered with partial transparency. However, elements with position: absolute (or position: fixed) do not inherit this, and are instead rendered at full opacity unless specifically told otherwise.
So as it turned out, the answer was simply "make sure the absolute elements have a relative container that is affected by the transparency". I forgot to.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With