Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,459
    Thanks
    1
    Thanked 23 Times in 21 Posts

    Why does this DIV stay in place?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>A DIV that doesn't scroll</title>
        <style type="text/css">
    #lightBoxOverlay {
      display: block;
      position: absolute;
      top: 0pt;
      left: 0pt;
      width: 100&#37;;
      z-index: 5000;
      height: 2052px;
    }
    
    #lightBoxOverlay2 {
      display: block;
      position: absolute;
      top: 0pt;
      left: 0pt;
      width: 100%;
      height: 2052px;
    }
    
    #lightBoxMessageWrapper {
      width: 100%;
      position: fixed;
      top: 50%;
    }
    
    #offerFormsArea {
      display: block;
      height: 560px;
      width: 684px;
      z-index: 5001;
      margin: auto;
      margin-top: -280px;
      border: 2px solid red;
    }
    
    #contentblock {
      width: 2000px;
      height: 2000px;
    }
        </style>
    </head>
      <body>
        <div id="lightBoxOverlay2"></div>
        <div id="lightBoxOverlay">
          <div id="lightBoxMessageWrapper">
            <div id="offerFormsArea">
              <p>This box doesn't appear to move as the user scrolls.</p>
            </div>
          </div>
        </div>
        <div id="contentblock">
          <div>
            <p style="width: 60px;">This content moves as the page scrolls.</p>
          </div>
        </div>
      </body>
    </html>
    I've been beating my head on this pretty much the whole day. When the window scrolls, the red box doesn't scroll with the rest of the content. What I can't figure out is, why?

    This is a reduced testcase from a webpage that I'm trying to fix for my company's product. If I can understand the why, then I can modify the page with a GreaseMonkey-like script to make it work with us.
    Last edited by Alex Vincent; 03-19-2008 at 01:58 AM.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Uhm, pretty simple:
    Code:
    #lightBoxMessageWrapper {
      width: 100%;
      position: fixed;
      top: 50%;
    }
    This positions an element relative to the viewport and forces it to stay there whatever else may happen.

  • #3
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,459
    Thanks
    1
    Thanked 23 Times in 21 Posts

    Thumbs up

    Okay, and position: absolute; means it stays in a calculated place on the page.

    Thanks! I always forget that difference...
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    position: fixed positions an element relative to the viewport, position: absolute positions an element relative to the next positioned (relative, absolute, fixed) ancestor element. This is an important difference. Only if no ancestor is positioned, the absolute position is calculated relative to the html element (most of the times corresponding to the viewport).

    Effectively this difference also means that absolutely positioned elements scroll with their ancestors (if they allow for scrolling) while fixed positioned elements are fixed within the viewport, wherever you position them, and scrolling won’t have any effect.


  •  

    Posting Permissions

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