I was just encountering this issue with a web page (I'm familiar with HTML but just now learning CSS.) I think I got it to work by having the relative element first in the HTML, then display the absolute element second. You may have to re-jigger your page layout, but it's the only way I got it to work. I don't believe there's a way to force it otherwise (I read in a book that z-index only applies to absolutely positioned elements, that's why setting your absolute element to z-postion of 1000 has no effect.) You can take a look at my mockup at www.madmaxmedia.com/julie (don't laugh, it's raw mockup with placeholders, etc.) The style sheet is at www.madmaxmedia.com/julie/styles.css. I had to try a bunch of different things because I was trying to slightly overlap a bubble graphic over a set of photos, but the photos differ in size and shape, as well as positioning on the page (plus ensure multiple browser compatibility and multiple browser window sizes), but I didn't want individually position each photo. In any case, the bubble graphic is defined in the stylesheet as an absolute element, and the photo is a relative element.