Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force absolutely-positioned elements to inherit transparency

Tags:

css

opacity

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.

like image 570
Niet the Dark Absol Avatar asked Jul 23 '12 16:07

Niet the Dark Absol


People also ask

How to set position of a child element relative to parent?

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.

What is an absolutely positioned 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.

What is the difference between inherit inherit and static 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.

What is the difference between position absolute and opacity?

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.


1 Answers

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.

like image 151
Niet the Dark Absol Avatar answered Nov 15 '22 06:11

Niet the Dark Absol