Monday, 19th December 2005
position:relative; the cause of all my woes
I've had a few CSS niggles since I redesigned bent back tulips earlier this year. One of the major ones was a baffling and infuriating insistence on the part of IE to magically vanish any elements that I'd floated within the body of my blogposts. So that's: half my comments form, the fields on my contact form, the <h3> post title, and any floated images at the side. How wonderful.
The interim solution was use of the * html hack to remove all the float declarations just for IE. A few weeks ago I got annoyed enough to try and track down the root of the problem, and to my surprise found that removing the redundant position: relative from the containing div.blogbody made all my floated elements come rushing back again.
This was quite an annoying bug for me, and I couldn't find anything about it by Googling, so I've put up a page with test cases in the vain hope that someone else will someday find it useful.
The other major niggle was only resolved today — my fixed "bent back tulips" heading which links back to the front page. What it was supposed to do, due to the wonders of z-index (and now does) is to stay where it is on the top-left corner of the screen and have the sidebar boxes float over it as they scroll. (Sorry, not you, IE; that's what happens when you don't support position: fixed.)
What was happening when I designed it was that the sidebar boxes were going behind the heading, which made it impossible to click on the sidebar links since there was a large 250x150px link to the front page on top of them. It was only happening in Opera though (Firefox had the expected behaviour), so I nervously let it go and stopped thinking about it.
However, Firefox 1.5 exhibited the same behaviour as Opera, so I concluded it must be the correct behaviour produced by fixing some bug in FF 1.0.x. (To be honest, I had originally doubted that it was just a weird Opera bug, but that seemed the easiest thing to believe.) I set about trying to pin it down and kill it dead.
After a frustrating time of fiddling with z-indexes (z-indicies?) I concluded that both Opera and Firefox were ignoring my z-index values! What was one to do?
Well, one could read the spec, and pay attention to that bit where it says: "Applies to: positioned elements". Gah. Still, slipping in a position: relative in the right place solved the problem and made things sane again.
What the hell is it with position: relative? It seems to be the ultimate weird hack; doesn't do anything on its own but causes all manner of strange side-effects.
Comments
Relative has a magic property which is kind of useful, but causes these weird effects you see. Basically, it means all absolute references inside it are now relative to _it_, rather than the top left of the screen (Because it is, in effect, absolutely positioned, it's just it's absolutely positioned to where the rendering engine would have put it anyway). Z-Index is ignored on non-positioned objects (Because otherwise what should happen when the world flows around them?) so position: relative fixes the position and allows the rendering engine not to have to deal with paradoxes that might end the universe.
(None of this applies to IE, because IE's version of z-index is, as far as I can tell, designed by crack monkeys while riding bicycles on the wrong side of the motorway. Whilst smoking bananas. And wearing comedy hats. And whistling the theme from Midnight Cowboy. In four part harmony.)
I'm going to have the image of those crack monkeys in my head all day now. hehehehe.
When I said "doesn't do anything on its own" I meant without the offsetting properties. I get what it does with regard to positioning; I just find it weird that (in IE) there's quite a few strange bugs that can be fixed by adding or removing position: relative (eg. see http://www.communitymx.com/content/article.cfm?cid=C37E0) when it should have no effect whatsoever in that context.
That's probably the best explanation I've heard for IE's z-index though :-)
I just get someone in!
It helps when getting someone in if the problem isn't an obscure, undocumented IE bug ;-)
Merry Christmas, Cathy and Kevin!
add a comment