How to bring an element to the front using css?
<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>