Posicionando objetos.

Estou com um problema para posicionar o rodapé de uma página. Tento usar position: absolute e bottom: 0, mas por algum motivo ela fica no topo, parecendo estar relacionado com uma div (menu) que está no topo também.

Imagem da página: https://i.snag.gy/RUoBhM.jpg

CSS:

html {
    text-align: center;
    background-color: #170A1C;
    position: relative;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu {
    background: linear-gradient(to bottom, #150926, transparent);
    width: 100%;
    height: 3em;
    line-height: 3em;
    z-index: 1000;
}

.imagem-icone {
    position: absolute;
    top: .4em;
    width: 2.6%;
}

.menu-nav {
    position: absolute;
    background-color: violet;
    width: 100%;
    height: 10em;
    line-height: 10em;
    display: none;
}

.mostrar {
    display: block;
}

.texto {
    width: 70%;
    height: 20em;
    position: absolute;
    top: 7em;
    z-index: 1000;
}

.texto-nome {
    color: #228CDB;
    font-size: 5em;
    font-family: 'Cinzel', sans-serif;
    margin-top: 1em;
    text-shadow: 0 .05em 5px black;
}

.linha {
    width: 100%;
    height: .04em;
    background: linear-gradient(to right, transparent, white, transparent);
    margin: 1em;
    opacity: .5;
}

.texto-legenda {
    color: #9C95DC;
    font-size: 1.2em;
    margin-top: 2em;
    opacity: .7;
}

.fundo {
    background-image: url(../../img/home-image.jpg);
    background-size: cover;
    width: 100%;
    height: 38.8em;
    position: absolute;
}

.rodape-caixa {    
    background-color: white;
    color: #9C95DC;
    opacity: .5;
    font-size: .8em;
    width: 100%;
    height: 2em;
    line-height: 2em;
    position: absolute;
    bottom: 0;
}

Agradeço se alguém puder ajudar.