Z-index — как спрятать дочерний элемент за родительским?

Question

[Денис Букреев]

На дворе ночь, голова ломается
простая задача, с которыми, вроде, сталкиваюсь повседневно

есть родительский элемент
есть дочерний - он шестой по вложенности, т.е. код выглядит вот так:

<header> <!-- мамка -->
  <div id="header">
    <nav>
      <ul>
        <li>
          <ul> <!-- чадо -->

но представим, что код такой:

<header> <!-- мамка - position:fixed; bg-color: white -->
        <li>
          <ul> <!-- чадо - position:absolute -->

Как спрятать "чадо" под "мамку"?
Что надо дать посреднику <li> ?
Я просто уже час бьюсь, мне кажется я всего пару методов по кругу пускаю и с места не двигаюсь

специально склеил испытательный полигон: codepen.io/anon/pen/zvyMVZ
теги другие, но суть та же

Answer 1

[Ярослав Самардак]

Так

Comments

[Денис Букреев]

li под блоком?
нет

[Ярослав Самардак]

Вы его и не сможете поместить под блок родителя, z-index работает только для дочерних элементов, и под родителя поместить вы его не сможете. Лучше просто изменить разметку (вынести дочерний элемент за родителя)

Answer 2

[jackie chan]

z-index 1
z-index 0

Comments

[Денис Букреев]

гениально, ватсон

Answer 3

[Денис Васильев]

ul {
  background-color: inherit;
}

codepen.io/corvus-007/pen/EVGJxm?editors=110