Jquery/JS - zsuwający się div (slideDown) przesuwa resztę elementów na stronie

pytanie zadane 26 września 2017 w HTML i CSS przez Śwież4k Bywalec (2,570 p.)

Mam problem otóż, gdy najeżdżam myszą na element - div (id = wysowka) prawidłowo się wysuwa jednak przesuwa element, który jest bezpośrednio pod nim (div z klasą pwdh), nie wiem jak zrobić, żeby wszystkie elementy zostały na swoim miejscu w trakcie i po całkowitym wysunięciu diva. Proszę o pomoc, ponieważ mnie już skończyły się pomysły na rozwiązanie tego problemu. Kod:

<html>
<head>


  <script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>

<link href="css.css" rel="stylesheet">
</head>
<body>
  <script>
$('document').ready(function(){
  $('.zwijka').mouseover(function(){
  $('#wysowka').stop().slideDown(200);
  }); //end mouseover
$('.zwijka').mouseleave(function(){
  $('#wysowka').stop().slideUp(300);
}); //mouseleave wysowka
}); //end ready


  </script>
<div id="main">

</div>
<div id="nav">
  <div id="firstButton" class="zwijka">

    </div>
</div>
<div id="mainbody">
  <div id="wysowka" class="zwijka">
    </div>
	<div class="pwdh">
		<P>ll</P>
		</div>

</div>



</body>
</html>

body {
margin:0;
padding: 0;
width: 100%;
overflow: auto;

}

#main {
height:21%;
width:100%;
background-color: navy;

}
#nav{
height:18%;
width:100%;
background-color: blue;

}
#firstButton {
height: 100%;
width: 15%;
background-color: grey;
float: left;
margin-left: 5%;

}

#wysowka {
display: none;
height:35%;
width:15%;
background-color: #DDD;
margin-left: 5%;
 position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
}

#mainbody {

	
}

.pwdh{
 position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
	
	
}