PDA

View Full Version : Layers position:relative


Finland Blue
09-01-2009, 07:52 AM
I am trying to place a layer of a company logo over an image slide show. So, when the images change, the logo stays in place constantly.
I have a table-bsed layout, and when I positioned my layer using position:relative, it did place it correctly in relation to the table cell it was in. But, instead of displaying above the image as a "layer", it moved the image downwards (so, seemed to behave just like one image placed before another, not shoing on top of it). Changing to position:absolute meant it displayed correctly as a later again (but obviously its position was not correct).
Is this normal behavious for the position:relative?

Here is the code :
<div id="Layer1" style="position:relative; top:10px; width:195px; height:62px; z-index:1;"><img src="logo.gif" width="195" height="62"></div>

edbr
09-01-2009, 08:03 AM
in relation to the table cell it was in
use dives, if you have a relative positioned div and place an element div positioned absolutely it will position in relation to its parent div

Finland Blue
09-01-2009, 01:25 PM
Thanks - that did it. I made a layer into which I put the larger image (slide show) and then inserted a second layer into that layer and put the logo there and adjusted its position, it displayed exactly as I wanted.

Thanks for your help :-)

Finland Blue
09-01-2009, 02:35 PM
Agh ... maybe it did not quite work !
In IE it seems OK
In Firefox it works for 2 runs of the slide show, then the logo dissappears (presumably covered?)
Can you look at the code and see if anything there explains it?

<div id="Layer1" style="position:absolute; top: 0px; width:780px; height:175px; z-index:1;">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 780, 175, 0, 8000, 0, "R")


</script>
<div id="Layer2" style="position:absolute; width:195px; height:62px; z-index:2; left: 10px; top: 10px; visibility: visible;"><img src="logo.gif" width="195" height="62"></div>
</div>