Z-Index Won't Work

Why does z-index not work?

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

z-index is not working inside table

Your td tabs are positioned absolutely but relative to the div.bottom.

Easiest is to remove the z-index on the parent.

Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/7/

Snippet:

div {

  position: relative;

  width: 70%;

  margin: auto;

  height: 500px;

  background-color: red;

}

table {

  border: none;

  border-spacing: 0 11px;

  width: 100%;

  table-layout: fixed;

}

td.tab {

  background-color: #eee;

  padding: 15px;

  width: 20%;

  position: absolute;

  z-index: -15;

  right: 90%;

}

td.plan {

  padding: 15px;

  width: 33.3%;

  text-align: center;

}

<div class="bottom">

  <table>

    <tbody>

      <tr>

        <td class="tab">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

      </tr>

      <tr>

        <td class="tab">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

      </tr>

      <tr>

        <td class="tab">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

        <td class="plan">test</td>

      </tr>

    </tbody>

  </table>

</div>

z-index not working properly with pseudo-element

That is because you have positioned your pseudo-element absolutely in the <a> element, and this causes it to be stacked on top of the text node, which has static positioning.

To solve this issue, simply wrap the inner text with <span> and then add this rule:

.start-coding > span {
  position: relative;
  z-index: 2;
}

Even better: you don't even need to add z-indices to both ::before and the nested <span>, since they come in an order that ensures that, when they are placed in a stacking context, the <span> will always be on top (since it comes after the ::before element in the DOM tree). See example:

.start-coding {
  display: block;
  font-size: 1.3rem;
  color: white;
  background-color: black;
  padding: 0.4rem 1.8rem;
  position: relative;
  z-index: 5;
  border-radius: 5px;
  width: 100%;
}

.start-coding::before {
  content: '';
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  border-radius: 5px;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}

.start-coding>span {
  position: relative;
}

<a href="#" class="start-coding"><span>Start Coding</span></a>

z-index stack doesn't work right

See The Stacking Context on MDN.

A stacking context is formed, anywhere in the document, by any element in the following scenarios: … Element with a position value "absolute" or "relative" and z-index value other than "auto".

…

Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

The z-index positions an element inside the stacking context it is associated with.

Giving an element position: absolute or position: relative establishes a new stacking context.

Thus #twitter is positioned inside the 3-d box represented by #socialButton.

The z-index is for that box, and not for the entire document.

(And #socialButton is inside #socialButtonRoot in the same way).

If you want A to be rendered below B then either:

Do not position A or
Do not make B a descendant of A

z-index doesn't work properly

You will need to add a position property to all elements that have a z-index property. Try adding position: relative to all of them.

Also refer to this documentation: z-index CSS | MDN

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/

Z-index Won't Work

z-index only works with position : relative/absolute/fixed so give position:relative to your logo.

http://jsfiddle.net/vzPUw/1/

Updated

http://jsfiddle.net/vzPUw/3/

In this, I changed in the markup because we never put block element inside an inline element. <a> is an inline element & h1 is a block element.

CSS z-index not working (position absolute)

Remove

z-index:0;

from .absolute.

Updated fiddle here.