posição absoluta

Fala pessoal, faz muito tempo que não vinha aqui, resolvi me reciclar e estou aprendendo html5 + css3 com umas videos aulas na web e foi ai que surgiu uma duvida. Estou fazendo o site http://www.feliper.com/html5/index.html para aprender mas estou com um certo problema na posição do menu e do oculos.

Se eu utilizar a visualização fullhd 1920x1080 o menu e o oculos são exibidos corretamente como pode ser visto abaixo.

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.feliper.com/img/000.png&key=beb702574cc607fce61976a1232ea2c6f0133fe43e9c7f7946a9e556331047f9" alt="000.png" />

Se eu utilizar qualquer resolução menor que esta fica desfigurado, veja o exemplo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.feliper.com/img/001.png&key=79cfef4303509a82277ab65ff09b5509521761622b98f048e168d314d529bd40" alt="001.png" />

O que eu queria saber é como faço para que independente do tamanho da tela(visualização) da pessoa o menu e o oculos permaneça no local indicado da resolução 1920x1080.

O codigo CSS que uso está logo abaixo e pode ser visto também na pagina:http://www.feliper.com/html5/index.html

@charset "UTF-8";
body {

 background-color: #DDDDDD;
 color: rgba(0,0,0,1);
}

div#interface {

 width: 900px;
 background-color: white;
 margin: -20px auto 0 auto;
 box-shadow: 0 0 10px rgba(0,0,0,0.5);
 padding: 10px;
}

p {

 text-align: justify;
 text-indent: 50px;
}

header#cabecalho img#icone {

 position: absolute;
 left: 65%;
 top: 40px;
}

/ Formatação de imagens com legendas /
figure.foto-legenda {

 position: relative;
 border: 8px solid white;
 box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {

 width: 100%;
 height: 100%;
}

figure.foto-legenda figcaption {

 opacity: 0;
 position: absolute;
 bottom: 0;
 background-color: rgba(0,0,0,0.4);
 color: white;
 width: 100%;
 padding: 10px;
 box-sizing: border-box;
 transition: opacity 1s;
}

figure.foto-legenda:hover figcaption {

 opacity: 1;
}

/ Formatação do menu /
#nav#menu {

 display: block;
}

nav#menu ul {

 list-style: none;
 text-transform: uppercase;
 position: absolute;
 top: -20px;
 left: 41%;
}

nav#menu li {

 display: inline-block;
 background-color: #DDDDDD;
 padding: 10px;
 margin: 2px;
 transition: background-color 1s;
}

nav#menu li:hover {

 background-color: #606060;
}

nav#menu h1 {

 display: none;
}

nav#menu a {

 color: black;
 text-decoration: none;
}

nav#menu a:hover {

 color: white;
}

Conto com ajuda de vocês :worship: