title: How can i set my text not to move but still have my css work properly
body: <p>Ok so i have my tex in my div, and i set my div to move but i need my text to stay on the same place, can anyone help me with this?</p>
  
  <pre><code>&lt;div id="nav_bar_menu"&gt;
        &lt;div id="pocetna" &gt;&lt;div class="moving_background_nav_bar_img"&gt;&lt;p id="pocetna_paragraf"&gt;POCETNA&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- Menu --&gt;
  </code></pre>
  
  <p>and here is my css</p>
  
  <pre><code>#nav_bar_menu {
      height: 38px;
      width: 580px;
      float: right;
      margin-left: 25px;
      margin-right: 25px;
      margin-top: 93px;
      overflow: hidden;
  
  }
  .moving_background_nav_bar_img {
      background: url(../Images/images/nav_bar_pictures_01.jpg);
      -moz-transition: top 0.7s;
      -webkit-transition: top 0.7s;
      -o-transition: top 0.7s;
      transition: top 0.7s;
      position: relative;
      height: 76px;
      top: 0;
      }
  #pocetna {
      height: 38px;
      width: 131px;
      }
  .moving_background_nav_bar_img:hover {
      top: -38px;
      position: relative;
      }
  </code></pre>
  
  <p>here is picture how it should look like <a href="http://i.imgur.com/0HhAiGT.png" rel="nofollow">http://i.imgur.com/0HhAiGT.png</a></p>
  
  <p>if i set position fixed for text then if i scroll down it is still on its position on page... i dont want nav bar to follow me on scroll.</p>