Div z id hidden ma visibility: hidden; ale spycha następny element o wartość swojej wysokości. Jak tego uniknąć? Chcę żeby pokazywał się nad zawartością która jest po #menu ( to takie submenu na hover)

[HTML] pobierz, plaintext 
<div id="menu">
  <ul id="topnav">
    <li>1</li>
    <li>2</li>
  </ul>
</div>
<div id="hidden">cos</div>
<div>cos2</div>
[HTML] pobierz, plaintext 

Zastosuj display: none; w stylu tego div-a.

[HTML] pobierz, plaintext 
.hide{
display: none;
}
.show{
display: block;
}
#subnav{
	position:relative;
	z-index: 3000;
}
 
    <div id="menu">
      <ul id="topnav">
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div id="subnav" class="hide">cos</div>
    <div>cos2</div>
[HTML] pobierz, plaintext 

i teraz na hover podmieniam klasy w subnav. Z show dalej spycha całą zawartość, jak zrobić, żeby subnav pokazywała się nad innymi divami?

Edycja:
Zmieniłem postion z relativ na absolute i działa. Proszę wytłumaczcie dlaczego? Myślałem, że jak jest absolute to wyskoczy pod sufit przeglądarki...

Absolute, pozycjonuje pod pierwszy element nadrzędny który ma pozycjonowanie inne niż static.
Z tym "wyskakiwanie pod sufit przeglądarki" to pozycjonowanie fixed, czyli względem okna przeglądarki.

Pierwsze zdanie jest przetłumaczone na polski oryginał jest http://www.w3schools.com/Css/css_positioning.asp, warto przeczytać.

dziękuję za wyjaśnienie