Z-Index Not Working with Position Absolute

z-index not working with position absolute

The second div is position: static (the default) so the z-index does not apply to it.

You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.

z-index not working in absolute

z-index only works for positioned elements on the same level as each other first - so in this case you need to make the hovered li a higher z-index than the non hovered li:

/* parent menu */
ul.menu {  list-style: none;  padding: 0;  margin: 0;  /*background: #34495e;*/  margin: 50px auto;  width: 800px;  width: -moz-fit-content;  width: -webkit-fit-content;  width: fit-content;  z-index: 10;  position: relative;}ul.menu li {  display: block;  float: left;  background: #34495e;  transform: skewX(25deg);}.menu > li > a {  transform: skewX(-25deg);  padding: 1em 2em;}.menu a {  display: block;  color: #fff;  text-transform: uppercase;  text-decoration: none;  font-family: Arial, Helvetica;  font-size: 14px;}ul.submenu.level_2 {  position: absolute;  width: auto;  left: 0%;  transform: skewX(-25deg);  transform-origin: left top;  padding: 0px;  box-shadow: 0 0 10px rgba(0, 0, 0, .9);}ul.submenu.level_3 {  left: 100%;  top: 0;  position: absolute;  width: auto;  transform-origin: left top;  padding: 0px;  box-shadow: 0 0 10px rgba(0, 0, 0, .9);}ul.submenu.level_4 {  left: 100%;  top: 0;  position: absolute;  width: auto;  transform-origin: left top;  padding: 0px;  box-shadow: 0 0 10px rgba(0, 0, 0, .9);}ul.submenu.level_5 {  left: 100%;  top: 0;  position: absolute;  width: auto;  transform-origin: left top;  padding: 0px;  box-shadow: 0 0 10px rgba(0, 0, 0, .9);}ul.submenu.level_6 {  left: 100%;  top: 0;  position: absolute;  width: auto;  transform-origin: left top;  padding: 0px;  box-shadow: 0 0 10px rgba(0, 0, 0, .9);}ul.submenu.level_2.move-menu {  left: -100%;}li.menu-list ul {  display: none;}ul.menu li a {  display: block;  padding: 1em;  text-decoration: none;  white-space: nowrap;  color: #fff;}/* hover effect */
li.menu-list:hover > ul {  display: block;  /*position: absolute;*/  padding: 0px;}li.menu-list {  position: relative;  z-index: 1;}/* parent menu hover effect*/
li.menu-list:hover {  background: #ec3939;  z-index: 2;}li.menu-list:hover a {  transform: skewX(-25deg);}/* children menu hover effect*/
li.menu-list:hover li {  float: none;  transform: skewX(0deg);}li.menu-list:hover li a {  float: none;  transform: skewX(0deg);}

<div class="container hidden-xs">  <ul class="menu">    <li><a href="http://sedtag.dev/">Home</a>    </li>
    <li class="menu-list">      <a href="category-16-b0-New+Arrivals.html">New Arrivals<b class="caret"></b></a>
      <ul class="submenu level_2">        <li class="menu-list level_2">          <a href="category-1526-b0-30+Nov+2015.html">30 Nov 2015</a>
        </li>        <li class="menu-list level_2">          <a href="category-1525-b0-28+Nov+2015.html">28 Nov 2015</a>
        </li>        <li class="menu-list level_2">          <a href="category-1521-b0-26+Nov+2015.html">26 Nov 2015</a>
        </li>        <li class="menu-list level_2">          <a href="category-1510-b0-24+Nov+2015.html">24 Nov 2015</a>
        </li>      </ul>    </li>    <li class="menu-list">      <a href="category-1533-b0-about+us.html">about us</a>    </li>    <li class="menu-list">      <a href="category-1534-b0-contact.html">contact</a>    </li>    <li class="menu-list">      <a href="category-11-b0-Restock+Items.html">Restock Items<b class="caret"></b></a>
      <ul class="submenu level_2">        <li class="menu-list level_2">          <a href="category-1527-b0-30+Nov+2015.html">30 Nov 2015</a>
        </li>      </ul>    </li>    <li class="menu-list">      <a href="category-5-b0-Ready+Stock.html">Ready Stock<b class="caret"></b></a>
      <ul class="submenu level_2">        <li class="menu-list level_2">          <a href="category-1165-b0-Baby.html">Baby<b class="caret"></b></a>          <ul class="submenu level_3">            <li class="menu-list level_3">              <a href="category-1536-b0-baby+child.html">baby child<b class="caret"></b></a>              <ul class="submenu level_4">                <li class="menu-list level_4">                  <a href="category-1537-b0-baby+children.html">baby children<b class="caret"></b></a>                  <ul class="submenu level_5">                    <li class="menu-list level_5">                      <a href="category-1538-b0-baby+children+2.html">baby children 2<b class="caret"></b></a>                      <ul class="submenu level_6">                        <li class="menu-list level_6">                          <a href="category-1539-b0-baby+children+3.html">baby children 3</a>                        </li>                      </ul>
                    </li>                  </ul>
                </li>                <li class="menu-list level_4">                  <a href="category-1543-b0-baby+children+clone.html">baby children clone</a>
                </li>              </ul>            </li>            <li class="menu-list level_3">              <a href="category-1542-b0-baby+child+2.html">baby child 2</a>            </li>          </ul>
        </li>        <li class="menu-list level_2">          <a href="category-960-b0-Jubah.html">Jubah<b class="caret"></b></a>          <ul class="submenu level_3">            <li class="menu-list level_3">              <a href="category-1541-b0-Jubah+child.html">Jubah child</a>            </li>          </ul>
        </li>        <li class="menu-list level_2">          <a href="category-306-b0-Cheong+Sam.html">Cheong Sam</a>
        </li>      </ul>    </li>  </ul></div>

z-index Not Working with Absolute Position

If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.

.top-bar {
 z-index:999;
}

CSS z-index not working (position absolute)

Remove

z-index:0;

from .absolute.

Updated fiddle here.

z-index not working even with absolute positioning

Here is my solution,

Basically, I had to change your html stucture. Check snippet below

This is required because, first, the

 <div class="backfin-top"></div>
 <div class="backfin-bottom"></div>

will be drawn on screen, and then the fish body will be drawn

In your case placing the fins inside fish body div made z-index useless for placing the fins behind the fish.

In the following example z-index is not required to place the fins behind.

.fish {  margin: auto;  display: block;  margin-top: 5%;  width: 300px;  height: 300px;  position: relative;}
.fish-body {  position: relative;  top: 40%;  left: 23.5%;  background: black;  width: 53%;  height: 45%;  border-radius: 10% 150% 2% 150%;  transform: rotate(142deg);}
.backfin-top {  position: absolute;  top: 38%;  left: -4%;  background: yellow;  width: 33%;  height: 25%;  transform: rotate(217deg);  border-radius: 0% 50% 400% 10%; }
.backfin-bottom {  position: absolute;  bottom: 15%;  right: 70%;  background: yellow;  width: 33%;  height: 25%;  border-radius: 10% 400% 10% 50%;
  transform: rotate(317deg) scale(-1, -1);}

<div class="fish">  <div class="backfin-top"></div>  <div class="backfin-bottom"></div>  <div class="fish-body">  </div></div>

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.

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 not working on absolute positioning

Move position:relative; and the z-index from .forum_post_outside to .forum_arrow_outside, also remove position: absolute; from .forum_arrow_outside, also added float: right; to .forum_arrow_outside:

.forum_post_outside {  border: none;  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;  min-height: 75px;  padding: 0 5px;  width: 100%;  background-color: #333;  margin-bottom: 2px;}.forum_arrow_outside {  position: relative;  z-index: 1;  float: right;  width: 150px;}.forum_arrow_top {  position: absolute;  top: 0;  right: 0;}.forum_arrow_inside {  max-width: 110px;  -moz-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);  background-color: #eee;  padding: 10px;  border: 1px solid #ccc;  -moz-border-radius: 2px;  -webkit-border-radius: 2px;  -khtml-border-radius: 2px;  border-radius: 2px;  z-index: 999;  position: absolute;  top: 0;  left: 0;}.forum_drop_down {  margin: 0!important;  margin-top: 10px!important;  line-height: 20px;  min-width: 110px;  border-bottom: 1px solid #ccc;  color: #000;  }

<div class="forum_post_outside">  <div class="forum_arrow_outside">    <div class="forum_arrow_inside">      <div class="forum_drop_down">        <img src="/images/delete_16.png">Delete</div>      <div class="forum_drop_down">        <img src="/images/unpin-16.png">Unpin</div>      <div class="forum_drop_down">        <img src="/images/edit_16.png">Edit</div>    </div>  </div></div>
<div class="forum_post_outside">
</div>
<div class="forum_post_outside">
</div>

Z-Index Not Working with Position Absolute