CSS: Absolute position text inside relative position div

Maybe easier to the the site in progress - http://www.roadsafetyforchildren.co.uk/

I want to position the yellow text at the bottom of the page over the blue bar (which is an img).

I have a div that has position:relative;, within that is another div that has position:absolute;. I thought by doing that when you assign a top position to the absolute div it will take the top of the relative div as it's starting point? Mine takes the top of the screen as it's starting point, hence the massive top position.

Obviously I want the yellow text to move with the the blue ba开发者_JAVA百科r depending how tall/wide the page is.

As far as I can see using position absolute is the only way to solve this?

Maybe I'm not understanding the whole notion of putting a absolute positioned div inside a relative one!

---

Your #footer div is absolutely positioned but it is not within any relatively positioned element. The only relative element I see is #actual-content, which is a sibling of #footer. If you place an absolutely positioned element WITHIN a relative element then it acts as you described.

---

The absolutely positioned div must be inside the relatively positioned div. That doesn't seem to be the case on the site you've linked.