使位置：絕對div落後於其位置：親戚

Question

我正在創建導航菜單;這裏是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> 

這裏是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; 
} 

第一子菜單（ul）應該其父之下，也是第二子菜單...我有嘗試z-index : -1;和它的作品，但它打破了模板的其他部分。有沒有什麼辦法可以讓position:absolute元素根據其父母position:relative？

我已經成立了一個小提琴：http://jsfiddle.net/4svujbj7/4/ 這裏是它應該如何看起來像一張照片：

Answer 1

我真的不知道，如果這是你一直在尋找答案.. 。

嘗試在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; 
} 

希望這是有益的... :)