title: move div with javascript
body: <p>I have two divs as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="health"&gt;&lt;/div&gt;
      &lt;div id="food"&gt;&lt;/div&gt;
      &lt;button id="click" onClick="position();"&gt;sdcasdfzsdvv&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre class="lang-css prettyprint-override"><code>@charset "utf-8";
  *{
      padding:0px;
      margin:0px;}
  
  body{
      background-color:#F4F4F2;
      margin-top:15px;}
  
  #container{
      width:270px;
      height:162px;
      margin-top:0px;
      margin-left:auto;
      margin-right:auto;
      position:fix;}
  
  #health{
      height:80px;
      margin-bottom:0px;
      border: solid 1px red;
      background-color:green;}
  
  #food{
      height:80px;
      margin-bottom:0px;
      border: solid 1px blue;
      background-color:yellow;}
  
  button{
      width:100px;
      height:80px;}
  </code></pre>
  
  <p>I want to have a function in JavaScript to move these two divs in a way that once the yellow on top and green bottom and by clicking on the button, the green moves up and yellow moves down and vice versa.</p>
  
  <p>but in the first trial, the code below does not work. I don't know how to change the position of these divs without changing their positions to absolute and relative and without using jQuery.
  I'd be grateful if you kindly help.</p>
  
  <pre><code>function position() {
      document.getElementById('health').style.top='80px';
      document.getElementById('food').style.top='0px';
  }
  </code></pre>