title: How to bring an element to the front using css?
body: <p>Hello I am working on a WordPress site, and I am trying to place a countdown shortcode just on my header.</p>
  
  <p>What I have tried to do is to float this shortcode using CSS but the issue is it goes under my navigation header</p>
  
  <p>This what I was applying</p>
  
  <pre><code>.mycodes{
     position:absolute;
     top : 0%;
     right:42.5%;
  padding-bottom : 10px;
  
    }
  </code></pre>
  
  <p>I also applied this</p>
  
  <pre><code>z-index: -1;
  </code></pre>
  
  <p>After searching online, but the div and shortcode disappears</p>
  
  <p>And the short code</p>
  
  <pre><code>[notdevice]&lt;div class="mycodes"&gt;[flipclock]&lt;/div&gt;[/notdevice]
  </code></pre>
  
  <p>This is the <a href="http://www.femessence.net/mine-2/" rel="nofollow">website</a> so you will see what am talking about</p>
  
  <p>I want it to show on the header instead of showing behind it</p>
  
  <p>Someone please help</p>