#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0

    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
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    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
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    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".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    9
    Rep Power
    0
    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.

IMN logo majestic logo threadwatch logo seochat tools logo