The answer is yes and no. Yes you probably do need z-index or at least an awareness of it to get the clock to show over the slideshow. No that's not the main problem.
The main problem is that the slideshow empties out or overwrites the HTML code within its target division (red). So the highlighted is removed from the document:
Code:
<div id="mybgcarousel" class="bgcarousel">
<div id="time">
<span id="clock"></span>
</div>
</div>
What I would do is simply place it outside of the bgcarousel div:
Code:
<div id="mybgcarousel" class="bgcarousel">
</div>
<div id="time">
<span id="clock"></span>
</div>
Now it becomes a matter of positioning and z-index (something like):
Code:
#time{position: absolute; right: 10%; bottom: 10%; width:390px; background: lightgreen; padding: 5px; z-index: 50;}
And, looking at the element inspector, it looks like the carousel has no z-index. So you can probably skip it in the style for the time div. Simply coming after the carousel and being positioned should be enough for it to cover the carousel.
I haven't tested any of this though, so there could also be other problems/considerations. I used % in the right/bottom cords because the carousel can at least in theory adapt to the size of the window. And I used right/bottom instead of left/top because those (right/bottom) appear to be the edges you want to conform to.
Bookmarks