Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de ¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/08/2016, 07:02
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 7 años, 5 meses
Puntos: 47
¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

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:
Ver original
  1. <header class="header1">
  2.   <div class="brand"><a href="#"></a></div>
  3.   <nav>
  4.     <ul>
  5.       <li>menu 1</li>
  6.       <li>menu 2</li>
  7.       <li>menu 3</li>
  8.       <li>menu 4</li>
  9.     </ul>
  10.   </nav>
  11. <main class="main1">
  12.   <nav id="menu-lateral">
  13.     <ul>
  14.       <li>menu 1</li>
  15.       <li>menu 2</li>
  16.       <li>menu 3</li>
  17.       <li>menu 4</li>
  18.     </ul>
  19.   </nav>
  20. </main>
  21. <header class="header2">
  22.   <div class="brand"><a href="#"></a></div>
  23.   <nav>
  24.     <ul>
  25.       <li>menu 1</li>
  26.       <li>menu 2</li>
  27.       <li>menu 3</li>
  28.       <li>menu 4</li>
  29.     </ul>
  30.   </nav>
  31. <main class="main2">
  32.   <nav id="menu-lateral">
  33.     <ul>
  34.       <li>menu 1</li>
  35.       <li>menu 2</li>
  36.       <li>menu 3</li>
  37.       <li>menu 4</li>
  38.     </ul>
  39.   </nav>
  40. </main>
Código CSS:
Ver original
  1. @charset "UTF-8";
  2. header {
  3.   background-color: #eee;
  4. }
  5. header li {
  6.   display: inline-block;
  7.   padding: 10px 15px;
  8.   cursor: pointer;
  9. }
  10. header li:hover {
  11.   background-color: #ddd;
  12. }
  13. header ul {
  14.   display: inline-block;
  15.   background-color: #ccc;
  16. }
  17. header nav {
  18.   display: inline-block;
  19.   vertical-align: top;
  20. }
  21.  
  22. .brand {
  23.   display: inline-block;
  24.   vertical-align: top;
  25. }
  26. .brand a {
  27.   display: block;
  28.   height: 120px;
  29.   width: 100px;
  30.   background-color: #000;
  31. }
  32.  
  33. main {
  34.   margin-bottom: 10rem;
  35. }
  36.  
  37. #menu-lateral {
  38.   width: 300px;
  39. }
  40. #menu-lateral ul {
  41.   padding-left: 0;
  42. }
  43. #menu-lateral li {
  44.   list-style: none;
  45.   padding: 10px 15px;
  46.   background-color: olive;
  47.   text-align: right;
  48.   margin-bottom: 1px;
  49. }
  50.  
  51. /* ------------Primer menu ejercicio------------  //
  52. // pongo margen negativo al top o al botom, dependiendo si es header o main para que se solapen
  53. // 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
  54. */
  55. .header1 {
  56.   margin-bottom: -30px;
  57. }
  58.  
  59. /** ------------segundo menu ejercicio------------  //
  60. /** hago lo mismo de arriba pero con posicionamiento negativo. Da igualqeu sea absolute qeu relative el resultado es el mismo
  61. // el resultado es que el menú lateral queda por encima del header. El comportamiento que debería ser el normal
  62. */
  63. .main2 {
  64.   position: relative;
  65. }
  66. .main2 #menu-lateral {
  67.   position: absolute;
  68.   top: -30px;
  69. }


A ver si alguien entiende el porqué de ello.

Gracias a todos de antemano
  #2 (permalink)  
Antiguo 24/08/2016, 12:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.024
Antigüedad: 16 años, 8 meses
Puntos: 1820
Respuesta: ¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

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.
  #3 (permalink)  
Antiguo 25/08/2016, 03:39
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 7 años, 5 meses
Puntos: 47
Respuesta: ¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

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
  #4 (permalink)  
Antiguo 25/08/2016, 11:08
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.024
Antigüedad: 16 años, 8 meses
Puntos: 1820
Respuesta: ¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

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.
  #5 (permalink)  
Antiguo 25/08/2016, 14:50
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 7 años, 5 meses
Puntos: 47
Respuesta: ¿por qué varía el "z-orden (z-index)" con margen negativo en este ejemplo?

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

Etiquetas: color, html, margen, negativo, todo, width, z-index
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:33.