Position: Relative: Disaster

April 4, 2010 9:18 PM

CSS Filter: I've implemented a couple CSS image position properties on my new site design using "position:relative." My problem is that somehow the images I've added, with links, have disabled all links to to the right of the image. Is there any way to fix this? (link to page inside)

This problem doesn't appear to exist if I use any of the other position classes (fixed, static, etc.), but I do need to use this class.

The site is using Wordpress and the Thesis theme.

Here's my site for reference - the two items using the CSS image position properties are the dude in the top hat and site name.

posted by Unsomnambulist to Computers & Internet (5 answers total)

I don't have time to look into the code right now, but this happens because "position:relative" things "float" on top of non relative things. It's as if they have a higher z-index. One way around is to give the container for the links a "position:relative" too, and maybe even a higher z-index if needed.
posted by drjimmy11 at 9:33 PM on April 4, 2010

(It also sounds like the div or container for the image is becoming larger than needed. If you gave it explicit width and size to just hold the image and not stretch over your links, that'd work too I bet).
posted by drjimmy11 at 9:35 PM on April 4, 2010

Response by poster: Sadly, I need these images to have a higher z index. And I did specify image size... but not div size, which I'll try next. Thanks for the response!
posted by Unsomnambulist at 9:38 PM on April 4, 2010

Best answer: use the position:relative on the img tag itself, no need for a div. otherwise use a span, since divs expand to width. i'm assuming that the position:relative div contains only the image and not the links.
posted by rhizome at 9:48 PM on April 4, 2010 [1 favorite]

Response by poster: Solved! Thanks rhizome! (changed to a span)
posted by Unsomnambulist at 11:04 PM on April 4, 2010