jQuery Cycle plugin z-index float problem

Question

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' />

This question has some interesting 'answers' for people >= 10k rep :) — alex, May 31 '10 at 01:35

vsync · Accepted Answer · 2011-09-04T07:21:01.200

14

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

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

edited Sep 04 '11 at 07:21

answered May 18 '09 at 13:10

vsync

118,978
58
307
400

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 May 19 '09 at 07:11
2

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 May 19 '09 at 09:31

score 0 · Answer 2 · answered Jul 18 '12 at 03:27

I had this same problem, but the final fix for me was setting the z-index on the things I wanted to float above my animation to a really high number (100 in my case). It appears that Cycle assigns it's own z-indexes (they were in the single digits, but still greater than 1 or 2, which is where I initially set my floating objects' z-indexes).

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

Just add z-index style to cycle container

.cycle-slideshow {
 z-index: 0; // or any smaller value to the covered div's
}

details see Displaying a div at a z-index above a jQuery Cycle slide show

edited May 23 '17 at 12:30

Community

1
1

answered Apr 20 '14 at 09:35

John Yin

8,057
4
25
25

score 0 · Answer 4 · answered Dec 31 '11 at 17:58

I know it is an old thread....but thought to put it here.....I used the presentationcycle in my site and faced similar problem, tried out the solution suggested here.....I changed the Z-index at many places in my own css files....but finally found that the problem was in the css of the cycle itself.....changing the z-index in it helped to solve my problem.

jQuery Cycle plugin z-index float problem

4 Answers4