Log in

View Full Version : is the z-index being used wrong



ajfmrf
07-19-2012, 02:34 AM
I thought that it would be what I needed to put the date time on top of the images but it appears to be behind the image as it is briefly seen as the page loads.

Am I using the right thing to do this(but not correctly using it) or am I more confused then I think I am...lol

http://www.web-user.info/clock/test/111.html

I need to get it all working then adjust the locations,colors and/or opacity for the image description and time/date

jscheuer1
07-19-2012, 03:06 AM
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:


<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:


<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):


#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.

ajfmrf
07-19-2012, 03:38 AM
Wow,it never ceases to amaze me when John, as well as a few others to numerous to mention here,swoop in here to easily answer so many questions.

I am not the best at coding but I can learn from experience.

I really enjoy coming here many times a day to see how many things I might help with.So far not too much but I am always confident I will get hep if I am stuck.

Thanks John
btw-it worked quite well John