Avoid Z-Index Working Relative to the Parent Element

Is there any way to place z-index according not to its parent element

I would say it depends on each situation but the answer is yes if you avoid creating a stacking context with the parent element. In other words, the parent element and child element need to belong to the same stacking context to be able to place the child element below its parent.

Here is some examples to better explain:

Why can't an element with a z-index value cover its child?

css z-index issue with nested elements

How can I display a header element above my content?

I have position but z index is not working

By the way, you can create your actual shape with an easier way and avoid any complex situation involving z-index

.netflix {

  width:100px;

  height:200px;

  display: inline-block;

  background: 

    linear-gradient(#e50914,#e50914) left/20px 100%,

    linear-gradient(#e50914,#e50914) right/20px 100%;

  background-repeat:no-repeat;

  margin: 20px;

  z-index:0;

  position:relative;

  overflow:hidden;

}

.netflix:before {

  content:"";

  position:absolute;

  top:0;

  left:0;

  height:100%;

  width:20px;

  transform: skewX(22deg);

  background:#e50914;

  transform-origin:top left;

  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.6);

}

<div class="netflix">

  

</div>

How to make child element higher z-index than parent?

This is impossible as a child's z-index is set to the same stacking index as its parent.

You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.

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 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/

CSS z-index not working with position relative

Thing you got wrong was position: relative instead of position: absolute. I changed it and now it works. position: relative makes it only, well, relative, not render regardless or other DOM elements.

I added background: red so the effect is better visible.

Your z-index works just fine, but element is still rendered respecting other DOM elements.

According to MDN:

relative:
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute:
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

Key part

.dropdown {
    position: absolute;
    ...
}

Snippet

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Z-Axis</title>

    <style>

        #main_div {

            position: relative;

            z-index: 0;

            top: 0px;

            left: 0px;

        }

        .list-wrapper {

          position: relative;

        }

        .dropdown {

            position: absolute;

            top: 0;

            left: 0;

            z-index: 1;

            background: red;

        }

    </style>

</head>

<body>

    <div id="main_div">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.

      <div class="list-wrapper">

        <p>line 1 of text</p>

        <ul class="dropdown">

            <li>5</li>

            <li>10</li>

            <li>20</li>

        </ul>

        <p>line 2 of text</p>

        <p>line 3 of text</p>

        <p>line 4 of text</p>

        <p>line 5 of text</p>

        <p>line 6 of text</p>

      </div>

    </div>

</body>

</html>

Overlapping does not work when i set parent's z-index

So Here is how it looks now JS Fiddle

html, body{

  margin:0;

  padding:0;

  height:100%;

}

.img_container {

  width: 100%;

  height: 500px;

  margin: 0 auto;

  position: relative;

  display: inline-block;

}

.to_top.black_gradient {

  width: 100%;

  height: 100%;

  display:inline-block;

  background: linear-gradient(0deg, rgb(75, 75, 75) 20%, rgba(75, 75, 75, 0.8) 70%, rgba(75, 75, 75, 0.3));

  position: absolute;

  top:0;

  left:0;

}

<div class="img_container">

  <img style="" class="tall" src="http://i48.tinypic.com/wrltuc.jpg" />

  <div class="to_top black_gradient">

  </div>

</div>