I know setOpacityCascade will cascade the alpha its children, but in that way, all children get that alpha. Therefore, if any children overlaps, the overlapped part will looks weird.
eg.
The red and blue block have the same parent
What I want when set parent opacity
What I got when set parent opacity
Any help will be appreciated.
Related
Sorry for such a "dummy" question but I really couldn't find a solution.
I have illustrated the situation graphically:
Inside the container, there are TWO siblings (RED <div>and BLUE <div>). Both have position: absolute;
RED has z-index:1;
BLUE has z-index:2;
RED's child (GREEN) has position:relative; and z-index:99;
I want to make GREEN to be upper than BLUE
Thank you!
UPDATE 1. Here is the fiddle
http://jsfiddle.net/yn9z7/
The key to solve that is in the article linked by sudhAnsu63 :
New stacking contexts can be formed on an element in one of three ways:
When an element is the root element of a document (the element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
But the interpretation is just the opposite. To set the blue element between the red and the green, the red one can not generate a stacking context. It is generating an stacking context because of the second rule; it has position absolute an z-index different from auto.
So, the solution is:
#red{
z-index:auto;
}
demo
This won't work since Red's z-index is lower than blue. z-index only works with elements with a common root element.
Check out the Stacking Contexts part in this article
Here the Blue div and the Red div is the direct child of container div. z-Index will not work exactly.
try changing the opacity of blue div to 0.99;
.bluediv {
opacity: .99;
}
http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
yeah, this is not possible because child elements inherit the z-index of the parent. so it does not make sense to give the green div a z-index of 99 because it's z-index is only valid inside the parent (red div).
So if you give a container a certain z-index lets say 20, the z-indexing inside this container starts again from 0. this is a good thing because otherwise we had to give all children a z-index of minimal 21 or they won't be visible.
the first container on a web page is the body tag, you can stack all its children with the z-index property starting from layer 0 (z-index 0). just like the body tag every child has its own z-index "system" unrelated to higher elements in the DOM. so the z-indexing starts over from 0 inside a parent container with its own defined z-index.
I am trying to apply the glow filter to the parent container of the parent container of the child, the event comes from the child.
so: [parent] has [another parent] which has [child]
Event is fired by the child and I only want to get the top level parent.
I have tried:
targetOwner.parent.parent.parent.filters = [glow];
but this applies the glow to all parent containers and I only need the top level one, is that even possible to achieve it this way? Any help appreciated. Thank you
you cant have a parent glow but the child not. you should divide the parent to two mocievlips, one will have the non-glowing childs, other will have the glowing parts of the parent.
I have a multiple Vboxes/Hboxes inside a parent Vbox. I have hide/show effects for the parent container, but I want to know if there is a way to make some of the children ignore this affect that they receive from their parent container.
There's none. The DisplayList is an hierarchical structure, and every leaf object is displayed by using all the parameters from parent objects, including visibility, rotation and more. You may, however, enumerate children in your Vbox/Hbox to undergo the effect, and select (and manually apply) the desired effect only to those that should be hidden. Note that your Vbox/Hbox's visibility should remain true, and opacity at original value, should you use fade in/out effect, otherwise those children of your Vbox/Hbox will too get altered.
You can workaround by adding extra layer.
Then parent would have layers:
New layer with parent background (apply effect here)
your child (effect isn't applied as its parent has no effect)
Hope that helps.
I was wondering if there's any way to make a child more transparent than it's parent. I need to make a div show through more than the div it's contained in, any way to achieve this with CSS?
This is what I'm aiming for: I have a background with 0.6 opacity, the element on the left has 0.8, so it's darker, but I need the one on the right to be more transparent. Setting less alpha to it than the parent doesn't work, it just matches its parent.
It can't be done using CSS 2, but can be done using CSS 3 http://www.css3.info/introduction-opacity-rgba/
If you used rgba for backgournd-color for the parent, inside elements will not get opacity.
If you don't want to use css3, you have no way except putting the child outside the parent and play with positions.
Depending on what your situation is, you could try any of the following:
Give the child position:absolute and use CSS to move it to the location you want in front of the parent div.
Convert either the child or the parent into an image, then use opacity on the other as necessary.
Use CSS 3: http://www.css3.info/preview/opacity/
Compatibility of the CSS 3 technique in various browsers: http://caniuse.com/css-opacity
In this jsfiddle
http://jsfiddle.net/vnKdu/7/
I made 3 boxes with info container, currently the effect works fine when you hover the info container and his height changes from 35px to 150px but I need to do same effect when hovering the parent not the actual element. Thank you!
Take a look at updated fiddle http://jsfiddle.net/vnKdu/9/
You should have set mouse events to parent element and morph child, just it.