Question

I have a problem. On my webpage I have implemented a clock which has absolute position, and is interfering with my dropdown menu.

My html code for the clock is as follows, where txt is a parameter i get from my JavaScript:

<time>
     <div id="txt"></div>
</time>

and my css code is like this:

time{
     border: 2px dashed red;
     font-size: 80px;
     font-family: circle;
     position: absolute;
     top: 15px;
     left: 43%;
     }

Because the clock is in front of my menu I cannot accesss nested unnumbered lists. What can I do to send my clock to the background?

Answer 1

You need to set the z-index to be lower than the menus z-index.

time {
    z-index: 900;
}

menu {
    z-index: 950;
}