Olá!
Antes da dúvida, um disclaimer : Compreendo que para se fazer um layout podemos (ou devemos) usar preferencialmente position:left e position:right mas quis fazer um teste com relative.
Então vamos à dúvida, que é bem simples: eu fiz o top de "conteudo" igual a 25px e o top de "aside" igual a 5px. Ambos são "relative". Bem, pelos meus cálculos hehe, ambos deveriam ser top=25px pra ficar lado a lado já que ambos são relativos ao antecessor estático mais próximo deles, no caso, "header". Porém, como já escrevi antes, um é 25 e outro 5.
Certo ?
Segue o código
<html>
<head>
<style>
* { margin: 0; padding: 0;} /*Reset*/
body {
background: gray;
}
#principal {
margin: 50px 50px;
background: white;
width: 800px;
}
#header{
border: 1px solid black;
}
#nav {
position: relative;
top: 10px;
left: 10px;
}
#conteudo {
position: relative;
top: 25px;
left: 200px;
border: 1px solid black;
width: 500px;
}
#aside {
border: 1px solid black;
width: 150px;
position: relative;
top: 5px;
left: 10px;
}
</style>
</head>
<body>
<div id="principal">
<div id="header"><h1>Welcome to .......</h1></div>
<div id="nav"><a href="#">Arquivo</a> | <a href="#">Editar</a></div>
<div id="conteudo">
<div id="db-warn">Main window.</div>
</div>
<div id="aside">
Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....Conteúdo Aside....
</div>
<div id="footer">Copyright © 2017</div>
</div>
</body>
</html>