¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

[JustinKO]

Hola a todos,

Por casualidad me he encontrado con este curioso comportamiento (por lo menos para mí) al estar buscando una solución a un problema que tenía (paradójicamente va a ser la solución a lo que buscaba)

Os explico a ver si alguien me puede decir el porqué de esto y así poder entender un poco mejor este intrincado mundo del CSS. (Pongo un link a codepen para verlo mejor)

Tengo una web con un header con su logo a la izquierda y su nav a la derecha.
Debajo tengo un main con un menú lateral.

Por una razón que no viene al caso, necesitaba subir el menú lateral unos pixel hacia arriba de manera que se solapara con el header, quedando este menú lateral, por debajo del logo del header pero por encima del background de este header.

En un principio estaba buscando conseguirlo con z-index pero no era capaz de hacerlo de esta manera.

El caso es que en code pen, he visto que usando margen negativo lo consigo, pero no sé el porqué y me gustaría entenderlo antes de utilizarlo.

Os pongo el código aquí y aquí el link a codepen

Dos cosas (esto lo entenderéis mejor viendo el ejemplo de codepen:

1. en el código html está repetido el código para luego crear los casos, con margin y posicionamiento negativo
2. Si os fijáis en el CSS a partir de lo comentado es lo que realmente tenéis que ver para entender el ejercicio

Código HTML:

<header class="header1">
  <div class="brand"><a href="#"></a></div>
  <nav>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
  </nav>
</header>
<main class="main1">
  <nav id="menu-lateral">
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
  </nav>
</main>
<header class="header2">
  <div class="brand"><a href="#"></a></div>
  <nav>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
  </nav>
</header>
<main class="main2">
  <nav id="menu-lateral">
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
  </nav>
</main>
 

Código CSS:

@charset "UTF-8";
header {
  background-color: #eee;
}
header li {
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}
header li:hover {
  background-color: #ddd;
}
header ul {
  display: inline-block;
  background-color: #ccc;
}
header nav {
  display: inline-block;
  vertical-align: top;
}
 
.brand {
  display: inline-block;
  vertical-align: top;
}
.brand a {
  display: block;
  height: 120px;
  width: 100px;
  background-color: #000;
}
 
main {
  margin-bottom: 10rem;
}
 
#menu-lateral {
  width: 300px;
}
#menu-lateral ul {
  padding-left: 0;
}
#menu-lateral li {
  list-style: none;
  padding: 10px 15px;
  background-color: olive;
  text-align: right;
  margin-bottom: 1px;
}
 
/* ------------Primer menu ejercicio------------  //
// pongo margen negativo al top o al botom, dependiendo si es header o main para que se solapen
// el resultado es que los li del menu lateral, solo el background, se queda por debajo de los elementos del header, salvo del background de éste
*/
.header1 {
  margin-bottom: -30px;
}
 
/** ------------segundo menu ejercicio------------  //
/** hago lo mismo de arriba pero con posicionamiento negativo. Da igualqeu sea absolute qeu relative el resultado es el mismo
// el resultado es que el menú lateral queda por encima del header. El comportamiento que debería ser el normal
*/
.main2 {
  position: relative;
}
.main2 #menu-lateral {
  position: absolute;
  top: -30px;
}
 

A ver si alguien entiende el porqué de ello.

Gracias a todos de antemano