make position: absolute div go behind its position: relative parent

Question

i'm creating a navigation menu; here is the HTML:

<nav class="main-nav">
    <ul>
        <li>
            <a href="" title="">ITEM 1-1</a>
            <ul>
                <li>
                    <a href="" title="">ITEM 2-1</a>
                    <ul>
                        <li><a href="" title="">ITEM 3-1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

and here is the css :

.main-nav li {
  position:relative;
  z-index:200;
}

.main-nav > ul > li > ul {
  position:absolute;
  z-index:100;
}

.main-nav > ul > li > ul > li > ul {
  position:absolute;
  z-index:50;
}

The first sub-menu ( ul ) should go under its parent and also the second sub-menu... i have tried z-index : -1; and it works but it breaks other parts of the template. is there any way that a position:absolute element can go under its position:relative parent?

i have set up a fiddle : http://jsfiddle.net/4svujbj7/4/ and here is a photo of how it should look like : screenshot

If you only use z-index on an element with position absolute it shouldn't break anything. — Jonathan Gray, Oct 26 '14 at 21:04
Unless the parent itself establishes a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context). You could find a good list of [properties create stacking context here](http://stackoverflow.com/questions/16148007/which-css-properties-create-a-stacking-context) — Hashem Qolami, Oct 26 '14 at 21:06
@JonathanGray when i do it , it goes under the next elements on the page , because it's an element with z-index of "-1" and besides what do i do about the second-level sub-menu , even if i give it "-2" it doesn't go under it's parent — Amin20100, Oct 26 '14 at 21:53

score 1 · Answer 1 · answered Oct 26 '14 at 23:01

I really don't know if this is the answer you've been looking for...

Try to change for this code in CSS:

* {
padding:0;
margin:0;
list-style:none;
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.main-nav-wrap{
  background-color:#fff;
  -webkit-box-shadow:0 0 15px rgba(0,0,0,0.2);
     -moz-box-shadow:0 0 15px rgba(0,0,0,0.2);
          box-shadow:0 0 15px rgba(0,0,0,0.2);
}

.main-nav{
  height:60px;
  padding:0 10px;
}

.main-nav > ul > li {
  float:right;
  font:13px yekan;
  padding:9px 0px;
  height:60px;
  margin-left:-5px;
}

.main-nav > ul > li .icon {
  -webkit-transition: all 100ms ease-in-out;
     -moz-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
       -o-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
}

.main-nav > ul > li:hover{
  background-color:#EDEDED;
}

.main-nav > ul > li:hover .icon {
  visibility:hidden;
}

.main-nav > ul > li:first-child{
  font-size:16px;
  background: #4AC47B;
  margin-left:0px;
  background: -moz-linear-gradient(top, #4AC47B 50%, #3EB66E 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#4AC47B), color-stop(50%,#3EB66E));
  background: -webkit-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -o-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: -ms-linear-gradient(top, #4AC47B 50%,#3EB66E 50%);
  background: linear-gradient(to bottom, #4AC47B 50%,#3EB66E 50%);
}

.main-nav > ul > li:first-child .livicon {
  margin-left:4px;
}

.main-nav > ul > li > a{
  padding:9px 35px;
  float:right;
  color:#7f7f7f;
  height:100%;
}

.main-nav > ul > li:first-child > a{
  font-size:16px;
  padding:8px 33px;
  color:#fff;
}

.main-nav > ul > li:first-child .icon {
  display:none;
}

.main-nav ul li{
  position:relative;
    z-index:auto;
  -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
}

.main-nav ul li a{

}

.main-nav li ul{
  position:absolute;
  background-color:#fff;
  width:225px;
  visibility:hidden;
  -webkit-transition: all 150ms ease-in-out;
     -moz-transition: all 150ms ease-in-out;
      -ms-transition: all 150ms ease-in-out;
       -o-transition: all 150ms ease-in-out;
          transition: all 150ms ease-in-out;
  opacity:0;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
     -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
          box-shadow:0 0 5px rgba(0,0,0,0.5);
}

.main-nav > ul > li > ul{
  top:60px;
  right:0px;
  z-index:auto;
  -webkit-transform:translateY(-100px);
     -moz-transform:translateY(-100px);
      -ms-transform:translateY(-100px);
       -o-transform:translateY(-100px);
          transform:translateY(-100px);
}

.main-nav ul  li:hover > ul {
  visibility:visible;
  opacity:1;
}

.main-nav > ul > li:hover > ul {
  -webkit-transform:translateY(0);
     -moz-transform:translateY(0);
      -ms-transform:translateY(0);
       -o-transform:translateY(0);
          transform:translateY(0); 
}

.main-nav > ul > li > ul > li > ul{
  top:0px;
  right:50px;
  top:35px;
  z-index:200;
}

.main-nav li ul li{
  border-bottom:1px solid #EBEBEB;
  font:11px tahoma;
  color:#6D6D6D;
  padding:10px 17px 10px 8px;
  -webkit-transition: all 200ms ease-in-out;
     -moz-transition: all 200ms ease-in-out;
      -ms-transition: all 200ms ease-in-out;
       -o-transition: all 200ms ease-in-out;
          transition: all 200ms ease-in-out;
}

.main-nav li ul li:hover{
  background-color:#F7F7F7;
}

.main-nav li ul li:hover > a{
  color:#ED4848;
    z-index:auto;
}

.main-nav li ul li a{
  color:#6D6D6D;
}

Hope it's helpfull... :)

@Dornaweb look at this [http://jsfiddle.net/rc82q6eq/](http://jsfiddle.net/rc82q6eq/) and tell me what you want different ;) — Erika_Mac, Oct 27 '14 at 13:23
i want the sub-menus to be under their parent , like behind the shadow, like this pic : http://i.stack.imgur.com/d6YWM.jpg — Amin20100, Oct 27 '14 at 13:42
@Dornaweb look at this code I did and try to edit it [http://jsfiddle.net/rc82q6eq/2/](http://jsfiddle.net/rc82q6eq/2/) — Erika_Mac, Oct 27 '14 at 16:24
@Erica_Mac , thank you but still the first-level sub-menu is not behind the shadow :'( — Amin20100, Oct 28 '14 at 13:16

make position: absolute div go behind its position: relative parent

1 Answers1