CSS Challenge... absolute AND relative positionning

Trollivier · February 6th, 2007, 04:36 PM

Hi everyone. I'm new to this beautiful forum.

I have a very hard challenge to overcome.
I'm working on a web portal, with columns. I have a column on the right, separated in 3 sections, one under the other.

All these sections must be scalable with the text.
At the bottom of the 1st section, i must have div that contains a flash animation with a transparent background. This div is positionned over everything because the flash overflows the website design.

What I have to do is make sure this div is always aligned to the bottom of the section, mo matter what happens.

Ok now I'll summarize what I just said :P

I have an absolute DIV that must always be aligned with the bottom of one div that's in a column. This must be done without using PHP or Javascript.

I tried to put an absolute div nested within a relative div, but it didn't work, it aligned to the bottom of the page.

I hope I was clear with the statement of my problem.
Can anyone help?

(I just added a visual example...)

moojoo · February 6th, 2007, 05:12 PM

Sorry I don't see why this is a problem? Just put it in the right order in your code.

Trollivier · February 6th, 2007, 05:14 PM

Hmm because it has to be positioned over the columns borders, and a little over the next section's header.

To my knowledge, a relative div can't be positionned over the ones positioned over or under them, can they?

Ryan Fait · February 6th, 2007, 06:43 PM

The property z-index is what you need

moojoo · February 9th, 2007, 11:45 AM

Yeah if you want to stack them then listen to Ryan.

Trollivier · February 9th, 2007, 12:41 PM

This problem has been solved

The float box needed to be "position: relative" so the other absolute box inside it would follow the bottom.

Without the position:relative, the absolute box was always at the bottom of the page, rather that at the bottom of it's parent.