How to bring an element to the front using css?

Question

Hello I am working on a WordPress site, and I am trying to place a countdown shortcode just on my header.

What I have tried to do is to float this shortcode using CSS but the issue is it goes under my navigation header

This what I was applying

.mycodes{
   position:absolute;
   top : 0%;
   right:42.5%;
padding-bottom : 10px;

  }

I also applied this

z-index: -1;

After searching online, but the div and shortcode disappears

And the short code

[notdevice]<div class="mycodes">[flipclock]</div>[/notdevice]

This is the website so you will see what am talking about

I want it to show on the header instead of showing behind it

Someone please help

Note: z-index [only works on positioned elements](http://www.w3schools.com/cssref/pr_pos_z-index.asp) (position:absolute, position:relative, or position:fixed). Use one of those. — Rohan Khude, Sep 13 '16 at 09:33
Possible duplicate of [Bring element to front using CSS](http://stackoverflow.com/questions/15782078/bring-element-to-front-using-css) — Rohan Khude, Sep 13 '16 at 09:35

dstN · Answer 1 · 2016-09-13T09:52:32.340

5

z-index: -1;

will put your element behind all other elements (as well as the background from <body>)

the reason to use z-index is to bring elements in front of other elements or vice versa.

the inherit value of z-index is auto. if nothing else on your page is z-indexed you could try to put z-index on 2. if this won't show your element try to higher the value until your element is shown.

your navigation btw has following css rules:

.include-nav {
    position: relative;
    z-index: 9998!important;
}

so to put something ABOVE this you have to higher the z-index to at least 9999.

for further reading: https://developer.mozilla.org/en/docs/Web/CSS/z-index

edited Sep 13 '16 at 09:52

answered Sep 13 '16 at 09:32

dstN

332
6
21

I think this is very simple typo question so instead of giving answer there can be duplicate questions as well as this question needed to be deleted. :-) – Rohan Khude Sep 13 '16 at 09:34
well, if someone tries to bring an element in front of another with `z-index: -1;` it looks like he doesn't really understand z-index, so i tried to explain :) – dstN Sep 13 '16 at 09:36
how is it a typo question, all am trying to do is to float a div on my navigation bar – Tee Famakin Sep 13 '16 at 09:44
@RohanKhude typo !!!= type of. Also Tee, floating in CSS means something totally else than the layering order of elements. – Roope Sep 14 '16 at 08:10

How to bring an element to the front using css?

1 Answers1