How to Use Z-Index with Relative Positioning

Z-Index and Relative/Absolute Positioning

If I recall correctly the precedence order of z-indices is something like this:

canvas (where the element is drawn / parents drawable area)
bg images
z-index: -1
default (0)
z-index: 1+

When you give any child element a z-index of -1, it won't go below the parent's background because of the parent's precedence.

Here is your solution (just tried on firebug and it works):

Remove the bg image from #menu and add a separate div under the ul.menu before the li's.
Give the css below to this div.
Now give all those brush strokes a z-index smaller than -1. -2 works.

And that should be it.

CSS:

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

I know it's not that much semantic but, hey it works, right? :P

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>

Using z-index with relative and absolute positioning

I doubt this is exactly what you want to achieve, but it should be a good starting point. There is a few issues with your CSS. I will cover a few of them.

text-align: centre; should be text-align: center;. Although that only works with inline and inline-block elements.

You should use position:absolute when you want to position elements on top of one another or just to position it outisde of the document flow.

position:relative; is used on a parent element of an element with position:absolute. The absolute positioned element would then position itself relative to that parent element. Adjustments to the position absolute element can be done with top,right,bottom,left CSS properties.

Look in to the CSS styles of height:0;padding-bottom:75%. Varying the padding bottom allows you to retain a divs aspect ratio when scaled.

.container {  width:80%;  position:relative;  height:0;  padding-bottom:75%;}.fire, .snow, .container img {  width:100%;  position: absolute;  top:0;  left:0;  right: 0;}.snow {  z-index:1;}.fire {  z-index:2;}.container img {  z-index:3;  max-width:100%;    height:auto;}

<div class="container">  <img src="https://i.postimg.cc/qByLfxBJ/pic3.png">  <video class="snow" autoplay controls>    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  </video>  <video class="fire" autoplay controls>    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  </video></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>

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.

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;
}

Z-index on relative positioning

First of all lets refactor your CSS, you won't need width:100%; and height: auto; as width of the block level element is always auto but it takes entire horizontal space unless if it's floated or it's turned to inline-block or inline and as far as height is concerned, it's auto by default so you don't need to define it.

Secondly, if you are trying to stack the div on on another than consider using position: absolute; for the child elements instead of position: relative;, if you want to stick with position: relative; than you will need to define the top value in negative.

Demo

.div2{
    position:relative;
    left:0px;
    z-index:2; 
    top: -15px;
}

But make sure that position: relative; does change the position of the element, but it reserves the space physically in the flow, whereas, position: absolute; won't.

Also, if you want to apply some same properties to your child elements, you can use selectors like

.div0, .div1, .div2 {
   /* Common properties here */
}

.div2 {
   /* Override common properties, or you can define unique ones as well. */
}

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.

HTML - Css : z-index not working with relative positions

You're sort of right that declaring a position on an element will make its z-index property kick in. But in your example, because of the order of your elements in the HTML, infoDiv will already be on top by default in terms of z-index. You don't even need z-index.

What you need is to set their positions to absolute instead of relative.

Something like that: http://codepen.io/memoblue/pen/xOBBxK