Is Position: Fixed Z-Index Relative to Its Parent's Z-Index

Is position: fixed z-index relative to its parent's z-index?

In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.

Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.

Changing HTML options

The first option is to move inner outside of outer, which would look like this.

The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.

A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.

Changing CSS options

The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).

Explanation

If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.

Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.

z-index on absolute positioned element with fixed parent

It can't be done like that because z-index is relative to the elements of same stack and in your case you want the z-index of child to be lower than that of parent.

By the way if you don't make #q2 a child of #q1, it will work like charm.

Hope this help

z index fixed parent and child

Because poster is a child element of gui.

Fixed position makes them independent of parent elements anyway, so just move poster out of gui and it works:

<div id='gui'></div>
<div id='poster'></div>

https://jsfiddle.net/eaaz8o2z/

z-index not working with elements whose parents are in fixed position

The simple solution is that what I'm trying to do is simply impassible.

The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.

The order of elements is called the Stacking Order, the stacking order is:

1. If no z-index or position then the stacking order is as the html markup order.

2. All positioned elements (relative, absolute and fixed) appear on top of all none positioned elements (static).

3. z-index works only on positioned elements, and it will create Stacking Context.

Stacking Context

Group of elements with common parent create Stacking Context if one of the next conditions are meet:

1. The root document element (the <html> element).

2. Positioned element with z-index

3. Element with opacity less the 1 (this isn't known by most of web developers)

All the elements in Stacking Context move together in the stacking order,
meaning that if element a inside staking context A, can't be above element b inside staking context B, if the stacking order of B is higher the A,
even if the element 'a' has z-index of a million.

Update: new css roles that create Stacking context: transform, filter, css-region and pages_media.

The order inside the Stacking Context:

1. root element

2. positioned element with negative z-index.

3. none positioned elements in the order of the html markup

4. positioned elements

5. positioned elements with z-index according to the z-index.

Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.

To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.

Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Child elements z-index not working when parents are fixed and have the same z-index?

Right now both elements are siblings, so they are in the same stacking context. However, they also are both getting their z-index from the .fixed class, which is 111.

To see top above, you need the to add a z-index higher than 111:

.top {
  background: #222;
  height: 150px;
  top: 0;
  z-index: 112;
}

Edit:

Positioned elements create their own stacking contexts, where everything within that context is z-indexed relative to the base node. So, because both parent elements are positioned, they create a stacking context. Therefore, the zindexes of the things inside them won't be relative across contexts, and will instead as a whole context be delegated to by the topmost node.

My favorite article on the subject

z index and position relative

You are simply floating them next to one another. Apply left to the bottom div:

#bottom { left: -100px; }

What this will do is "position" the bottom div under the top one. Applying relative position by itself won't do anything, you need to start moving the target element around to see the stacking effect.

If you are wondering about absolute positioning, it works differently. Absolute positioning takes the element out of document flow (meaning it won't affect the layout of other elements), and by default puts it at the top left of its first ancestor that doesn't have a value of position:static, so both your elements stacked on top of each other.

Is Position: Fixed Z-Index Relative to Its Parent's Z-Index