Search code examples
csspositionpositioningcss-position

position:absolute; not sticking element to base of parent's scrollable height


Can you look at jsFiddle example and tell me why my green <div> won't stick to the bottom of its parent's scrollable height? I'm sure it's something simple. Thanks in advance!


Solution

  • If the answer to my comment is yes, than give you body tag a position of relative

    body
    {
    position: relative;
    }
    

    If some other element is the parent, just replace body with that element. With you given code, the green div is not sticking to the bottom because it is absolutely positioned and does not have any relative or absollutely positioned parent/ancestor, in which case it will position itself relative to the viewport/browser window/canvas (not the canvas element in HTML5) which may or maynot be the html or body element depending on the user agent/browser. When you give the body a position of relative, it provides a new positioning context and than the green div will be positioned relative to the body element. In case if the body tag is not the parent, give the position relative to the parent element, which ever that may be.

    Fiddle