Absolute positioned text moves when overflow is set to scroll

Inside a div, I need to have some text over some other items, so I gave it position: absolute.

However, inside that same div, I set the overflow to hidden because I'm making the div similar to the windows of a phone.

Anyways, when scrolling, the absolute positioned scrolls with the div, so it's like I gave it a fixed position.

Is there any way to fix this?

I'd add some pictures but newer members can't

Hello again.

Which browsers are you testing in? If I remember correctly, there was a bug in older versions of IE related to this.

As you (may have) found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

There is also a policy that prevents users from posting attachments until they have 30 posts and have been a member for 30 days, so if needed http://imageshack.us/ can be used to host images.

The problem is in both Safari and Google Chrome... so I'm assuming all browsers will be like this.

Here are the pictures:

i1129.photobucket . com/albums/m511/bigbob_and_billy/Initial.png

^That's what it's like initially.

i1129.photobucket . com/albums/m511/bigbob_and_billy/Scrolling.png

^After scrolling, the word 'people' stays in the same spot while everything else moves.

THanks for the help

Perhaps you're not aware that Safari and Google Chrome are both built on the Webkit rendering engine? I recommend you test in a better variety of browsers.

Is there a closer positioned ancestor than the element with the overflow property set? The simplest fix may be to make each of those boxes a positioning context by giving each "position:relative".

No, I actually wasn't aware of that.


Anyways, I managed to find a solution online which did use relative positioning.
Thanks for your help, though.