views:

2872

answers:

1

When I try to place an element on top of my jQuery Cycle element, it doesn't work. The element is always behind the jQuery cycle element. I use float: right; to position the element, and set its z-index to 100000, to no avail.

Firebug sees the Cycle element and its children as having low z-indexes, and shows the floating element to be in the right place.

The element never shows above the Cycling images.

<!-- the cycling set -->
<div id='headerimages'>
    <img src='images/header1.jpg' alt='' style='' />
    <img src='images/header2.jpg' alt='' style='' />
    <img src='images/header3.jpg' alt='' style='' />
</div>
<!-- the floating element -->
<img src='images/logotransparent.png' alt='' id='logo' />
+7  A: 

floating doesn't trigger z-index, only
Position: Relative and position: Absolute

so try these.. you might want try adding position:relative,
it won't effect anything most of the time, but will give you access to Z-index. :)

vsync
Thank you! CSS doesn't gel with my head. It's so high level, but seems to have really finicky requirements. I don't quite understand it and am the first to admit it. Your solution worked perfectly. Any idea why an element needs that? I though position: relative; was the default?
Antony Carthy
no, position: static is the default. its that the laws of the CSS world, that says that only relative and absolute have z-index. it kind of makes sense..
vsync
Thanks again :)
Antony Carthy