Results 1 to 3 of 3

Thread: How do I make an object stay in front of everything while scrolling in HTML?

  1. #1
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How do I make an object stay in front of everything while scrolling in HTML?

    This is a little tricky to explain so I'll add a visual aid.

    I want to have an object stay in the bottom right corner of my page no matter where the user scrolls. But I also want it to be ABOVE all the content of the site.

    For example, in the following two pictures where black=content and red=object





    The second image is just the content being scrolled to the top but the object thats in place.

    Sorry if my explanation is kind of confusing.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    use position: fixed;

    you may need to adjust the z-index (and/or put the block last in your markup) to keep it "on top."

  3. The Following User Says Thank You to traq For This Useful Post:

    ted.johnson0988 (03-27-2012)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,312
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Yes, something like:
    <div style="position: fixed; right:0px; bottom: 0px; background:red; width:100px; height:100px; zindex:1000"><div>
    ===
    Arie Molendijk

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •