Укладка абсолютных элементов в фиксированном элементе ⇐ CSS

[Anonymous]

Я пытаюсь сделать навигационное меню с 3 панелями (родитель -> Дети -> внуки, каждая 33% доступной ширины окна) в фиксированном родительском языке < /strong>, пункты подручков ниже детей, и детские предметы ниже родительских предметов. Class = "Snippet-Code">
#header-nav {position:fixed;top:20px;left:0;width:100%;height:100vh;z-index:1}
#parent-panel {position:absolute;top:10px;left:0;width:33%;background:#0000ff;z-index:1}
.children-panel {position:absolute;top:10px;right:-75px;width:33%;background:#ff0000;z-index:-1}
.grand-children-panel {position:absolute;top:10px;right:-25px;width:33%;background:#00ff00;z-index:-1}
ul li a {color:#fff}< /code>




Stuff before

• Parent item with children
  
  
  Child item with children
  
  Grand-child item

[*]Child item 2 - no children


[*]Parent item 2 - no children
[*]Parent item 3 - no children

Stuff after





Page content goes here
< /code>
< /div>
< /div>
< /p>
Я читаю, что взлом будет заключаться в том, чтобы добавить «относительный» элемент для создания нового контекста укладки, но он, кажется, не применяется здесь: Детские элементы все еще выше родителей ... и размер панелей (за исключением первых), с той жечкой, но и то же самое, но и с той же спиной, но и с той же спиной, но и с той же спиной, но и с той же спиной. Частично, дети все еще выше родителей. < /p>
Спасибо за вашу помощь. < /p>
Редактировать: < /p>
Примерный код выше, только для демонстрации, чтобы показать, какую структуру я использую, но, конечно, реальные стили, цветы и тонкое позиционирование будут сделаны после того, как я все еще получен, что я еще не получен, но и все еще есть графический гол. Просто нужна логика структуры):
изображение конечного результата < /p>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ed-element