¿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

[Rafael]

En realidad todo el flujo lo veo normal. Lo que no veo claro es porqúe el logo del caso 1 está por encima del menu verde.

Lo que lo haría sería una posoción absoluta pero ese objeto no la tiene. Curioso.

[JustinKO]

Hola,

Gracias por tu respuesta. Sí, al final lo he resuelto con posicionamiento y z-index, pero sigo buscando el porqué de ese comportamiento. Seguro que tiene una explicación.

Ayer no tuve tiempo, pero en cuanto pueda se lo voy a dedicar para entenderlo, porque estas son las cosas que, aunque en un principio parece que no tienen lógica, luego cuando se la encuentras te ayuda a comprender y profundizar más en el funcionamiento del css.

Gracias de nuevo

[Rafael]

Lo que sí es eguro es que no es por el margin negativo.

Lo que rompe ese flujo es o un float o un position o un z-index. Ya después un top o un margin negativo hacen evidente el solapamiento, pero estos dos no cambian la posición Z.

[JustinKO]

Es curioso porque lo que está por debajo es solo el fondo, en cambio la fuente está por encima. NO sé es muy raro pero estoy convencido que tiene una explicación lógica.

En este fork he ampliado el tamaño del texto y subido más el elemento para ver lo que digo

También he visto que si pones un display: inline-block al menú lateral, ya se viene arriba.

No sé es un lío. Otro día con la cabeza más fresca volveré a ello.

Gracias de nuevo y un saludo