*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    position: sticky;
    /* precisa de cordenadas. assim que ele sai do campo de visão, com top 0, ele meio que fica travado acima */
    top: 0;
    background-color: cornflowerblue;
    color: white;
}
div#container{
    margin: 1em auto;
    max-width: 50rem;
    background-color: #DDD;
    padding: 1rem;
    /* tem prioridade em relação as tags com mesmo pai. se comentasse o fixed ficaria acima. */
    position: relative;  /* nesse exemplo n precisa do relative, mas quando precisar, vai ser necessario organizar o eixo z(z-index) */
    /* define camada da posicao, quanto menor mais embaixo, quanto maior mais "sobre" fica */
    z-index: 1;
}
header, main, footer{
    border: 1px solid #999;
    padding: 1rem;
}
div.menu{
    background-color: aqua;
    padding: 2rem;
    box-shadow: 0 0 0.1rem 0.1rem grey;
    border-radius: 0.5rem;
    /* quando coloca fixed ou absoljute o displey do elemento fica inline-block */
    position: fixed;
    top: 0;
    left: 0;
    /* é necesssario colocar para ocupar 100% */
    height: 100vh;
    width: 20rem;
    z-index: 2;
}