Question

I have a weird problem with my HTML and CSS code:

<header>
    <h1>title</h1>
</header>
<nav>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
    <a href="">menu 1</a>
</nav> 

header {
  margin: 0 auto;
  position: relative;
  top: 200px;
  width: 200px;
}
header h1 {
  font-size: 24px;
  text-align: center;
}
nav {
  clear: both;
  margin: 0 auto;
  position: relative;
  width: 200px;
}
* {
    border: none;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}
body, html {
    height: 100%;
}

Why does the <nav> appear above the <header> when they are both relatively positioned?

See the jsFiddle.

Answer 1

It’s not, you just moved the header down below the nav. You specified a top: 200px to it, which moves it down 200px… Your nav appears in the place it would have appeared if that property wasn’t there. It’s moved down the height of the header from the top of the window. If you want to push the nav down too, you can add a top: 200px to it as well, but this just causes the problem of every other element needing to be relatively positioned 200px from the top of where it originally appears, which isn’t very logical.

What exactly are you trying to do? Did you mean to use margin-top: 200px instead, to move everything on the page down by 200px?