Why Does Position:Relative; Appear to Change the Z-Index

Why does position:relative; appear to change the z-index?

You need to refer to the specification and more precisely the painting order to understand when each layer is painted.

Without position:relative your element is not positioned and will be painted at the step (4):

For all its in-flow, non-positioned, block-level descendants in tree
order: If the element is a block, list-item, or other block
equivalent:

Then we paint the positioned elements (including the .mask) at the step (8)

All positioned, opacity or transform descendants, in tree order that fall into the following categories

Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.

If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative; /* you can remove this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}

<section>
  <div class="container">
    <h1>Hello World</h1>
  </div>
  <div class="mask"></div>
</section>

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.

Why position: relative without z-index creates a new stacking context?

Actually, the accepted answer is incorrect - top, left, bottom and right have nothing to do with this. If you remove the top and add a negative margin-bottom, you'll see it still gets drawn on top.

.c1 {
  position: relative;
  margin-bottom: -50px;
}


.c2 {
   background: green;
   width: 200px;
   height: 200px;
 }

<div class="c1">
  Why I'm visible?
</div> 

<div class="c2"> </div>

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>

Why does a relative positioned element appear above a floated element?

Elements without a position property set will default to "position:static" which ignores all positioning properties such as z-index. By setting relative positioning to the header element you have introduced the z-index positioning property to that element bringing it in front of the floater element which does not have a z-index property.

Since z-index will be ignored with a static floater element you will have to give that element a position property (absolute, relative or fixed) so it can have z-index as well.

For your example "position: relative;" would work. Once you have set the position property on the floater element you would need to add a z-index value to it that's higher then the header element. Which in this case z-index:1 would be a higher value since z-index is set to default.

Example:

<div id=floater style="float:right; position: relative; z-index: 1;">
   Floater!
</div>
<div id=header style="width: 100%; position: relative; background-color:   lightgreen">
  This is the header
</div>

CSS: z-index not working inside a position:relative container

z-index should be -1 this should work:

.container {  position: relative;  top: calc(100vh * 0.4);  left: 0;  width: 100%;}
.image {  z-index: 1;}
.wall-panel {  width: 100%;  background-color: red;  height: 200px;  position: absolute;  top: 0;  z-index: -1;}

<div class='container'>  <img class='image' src='http://lorempixel.com/400/400/'>  <div class='wall-panel'></div><div>Some other text that positions under the container.</div></div>

CSS - Z-index is not working with positions relative and absolute

The problem is that you're establishing a stacking context on .menu_wrapper when you set z-index: 999. When a stacking context is established, you cannot position a descendant element behind an ancestor.

Remove z-index: 999 from .menu_wrapper:

.menu_wrapper {
  position: relative;
  /* z-index: 999; << remove */
  height: 70px;
  width: 600px;
  background-color: blue;
}

Then change the z-index on .sub-menu from 1 to a negative number such as -1:

Updated Example

.sub-menu {
  position: absolute;
  z-index: -1;
  margin-top: -200px;
  margin-left: -132px;
  padding: 15px;
  padding-top: 20px;
  background-color: red;
  transition: all 1s ease-in-out;
}

What is the default z-index of relative positioned element?

Yes, this is normal behavior. Your relatively positioned element appears after your stickily positioned element in the source, so its natural stack level is higher and therefore it appears above the stickily positioned element. See section 9.9 of CSS2, or section 11 of css-position.

Stickily positioned elements obey the same stacking rules as relatively and absolutely positioned elements.

Why Does Position:Relative; Appear to Change the Z-Index