Могу ли я разместить дедушку внука за дедушкой дедушки?

Question

Попытка получить вспомогательный ящик для выдвижения из левого навигационного ящика на веб-странице. Однако он структурирован, суб-ящик является внуком дедушки и дедушки. Можно ли расположить вспомогательный ящик за ящиком дедушки и бабушки?

Например, в этой скрипке я могу поместить «c» за «a», не меняя структуру html? CSS-только в принципе.

http://jsfiddle.net/ZmvKX/32/

HTML структура:

<div id="a"> 
    <div id="b"> 
     <div id="c"> 
     </div> 
    </div> 
</div> 

Answer 1

Установите отрицательный z-index для ребенка, #c; и удалите один набор из родителя, #a.

HTML:

<div id="a"> 
    <div id="b"> 
     <div id="c"> 
     </div> 
    </div> 
</div> 

CSS:

#a { 
    width: 300px; 
    height: 500px; 
    border: 1px solid black; 
    background-color: #000; 
} 

#b { 
    width: 300px; 
    height: 100px; 
    border: 1px solid black; 
    padding: 10px 10px; 
    top: 100px; 
    left: 100px; 
    background-color: #ff0; 
} 

#c { 
    width: 400px; 
    height: 200px; 
    border: 1px solid black; 
    background-color: #fff; 
    position: fixed; z-index: -2; 
} 

http://jsfiddle.net/ZmvKX/35/